当前位置：首页 > news >正文

vue购物车案例，v-model 之 lazy、number、trim，与后端交互

news 2025/8/22 1:06:30

购物车案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="d1"><h1>购物车</h1><table><thead><tr><th>商品id</th><th>商品名</th><th>商品价格</th><th>商品数量</th><th>全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th></tr></thead><tbody><tr v-for="goods in goodsList"><th>{{goods.id}}</th><td>{{goods.name}}</td><td>{{goods.price}}</td><td><span @click="handleJian(goods)">-</span><input type="text" v-model="goods.count"><span @click="handleAdd(goods)">+</span></td><td><input type="checkbox" v-model="checkGoodList" :value="goods" @change="handleCheckOne"></td></tr></tbody></table><h3>选中的商品：{{checkGoodList}}</h3><h3>是否全选：{{checkAll}}</h3><h3> 总价格：{{getPrice()}}</h3>
</div>
</body>
<script>new Vue({el:'#d1',data:{goodsList: [{id: 1, name: '短袖', price: 99, count: 2},{id: 2, name: '短裤', price: 39, count: 1},{id: 3, name: '短裙', price: 189, count: 6},{id: 4, name: '短袜', price: 8, count: 8},{id: 5, name: '长筒袜', price: 4, count: 88},{id: 6, name: '过膝袜', price: 5, count: 90},],checkGoodList:[],checkAll:false},methods:{getPrice(){var total=0for (var item of this.checkGoodList){total+=item.price * item.count}return total},handleCheckAll(){if (this.checkAll){this.checkGoodList=this.goodsList}else {this.checkGoodList = []}},handleCheckOne(){if (this.checkGoodList.length==this.goodsList.length){this.checkAll=true}else {this.checkAll=false}},handleAdd(goods) {goods.count++},handleJian(goods) {if (goods.count > 1) {goods.count--} else {alert('宝贝不能再少了')}}}})
</script>
</html>

v-model 之 lazy、number、trim

lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>input 和v-model</h1><input type="text" v-model="name"><h1>v-model修饰符：lazy、number、trim</h1><input type="text" v-model.lazy="s1">--->{{s1}}<br><input type="text" v-model.number="s2">--->{{s2}}<br><input type="text" v-model.trim="s3">--->{{s3}}</div>
</body>
<script>var vm = new Vue({el: '#app',data: {name: '彭于晏',s1: '',s2: '',s3: '',},})
</script>
</html>

与后端交互

# 1 使用jq的ajax ===》不好---》引入了jq框架，好多功能用不到
# 2 原生js fetch
提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分
fetch('http://127.0.0.1:5000/userinfo')
.then(response => {
return response.json();
}).then(data => {
this.username = data.username
this.age = data.age
});
# 3 axios 第三方ajax，只有ajax，没有别的，小--》底层还是基于XMLHttpRequest
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

jq发送

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="./js/jq.js"></script>
</head>
<body>
<div id="app"><h1>与后端交互</h1><button @click="handleLoad">加载用户信息</button><p>用户名：{{username}}</p><p>年龄：{{age}}</p></div>
</body>
<script>var vm = new Vue({el: '#app',data: {username: '',age: ''},methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给 username和age 页面就有了// 1 发送请求方式1 使用 jq的ajax$.ajax({url: 'http://127.0.0.1:5000/userinfo',method: 'get',success: data => {// CORS policy  跨域问题---》解决---》后端响应头中加入：Access-Control-Allow-Originconsole.log(typeof data)data = JSON.parse(data)this.username = data.usernamethis.age = data.age}})}}})
</script>
</html>

原生js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="./js/jq.js"></script>
</head>
<body>
<div id="app"><h1>与后端交互</h1><button @click="handleLoad">加载用户信息</button><p>用户名：{{username}}</p><p>年龄：{{age}}</p></div>
</body>
<script>var vm = new Vue({el: '#app',data: {username: '',age: ''},methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给 username和age 页面就有了// 1 原生fetch发送请求fetch('http://127.0.0.1:5000/userinfo').then(response => {return response.json();}).then(data => {this.username = data.usernamethis.age = data.age});}}})
</script>
</html>

axios

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head>
<body>
<div id="app"><h1>与后端交互</h1><button @click="handleLoad">加载用户信息</button><p>用户名：{{username}}</p><p>年龄：{{age}}</p></div>
</body>
<script>var vm = new Vue({el: '#app',data: {username: '',age: ''},methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给 username和age 页面就有了// 1 axios发送请求axios.get('http://127.0.0.1:5000/userinfo').then(res => {console.log(res.data); //真正的响应体的数据在res.datathis.username = res.data.usernamethis.age = res.data.age}).catch(error => {console.log(error);});}}})
</script>
</html>

查看全文

http://www.lryc.cn/news/277038.html