05-vue表单绑定与购物车实例
Posted Ultraman_agul
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了05-vue表单绑定与购物车实例相关的知识，希望对你有一定的参考价值。
vue表单绑定与购物车实例
1.1 v-model在复选框中的使用
在复选框中使用v-model指令，一般会作用在一个数组上。
<div id="box">
<!--
v-model="checkArray":
checkArray:为数组，所有选中的checkbox的value都会添加到数组中，取消选中时会自动从数组中删除该value。
注意：这里一定要给checkbox添加上value属性
-->
<input type="checkbox" v-model="checkArray" value="vue"/>vue
<input type="checkbox" v-model="checkArray" value="react"/>react
<input type="checkbox" v-model="checkArray" value="node"/>node
<input type="checkbox" v-model="checkArray" value="js"/>js
<button @click="login()">提交</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data : {
checkArray:[] //接收选中的checkbox的value
},
methods : {
login(){
console.log(this.checkArray);
}
}
})
</script>
运行效果
1.2 v-model在单选框中的使用
在单选框中使用v-model指令，模型定义为一个字符串即可。
<div id="app">
<form action="">
<input type="radio" v-model='selectedValue' name="football" id="" value='足球'>足球
<input type="radio" v-model='selectedValue' name="basketball" id="" value='篮球'>篮球
<input type="radio" v-model='selectedValue' name="ppball" id="" value='乒乓球'>乒乓球
<input type="radio" v-model='selectedValue' name="ymball" id="" value='羽毛球'>羽毛球
</form>
<button @click='showData'>按钮</button>
</div>
<script src='./js/vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
selectedValue: ''
},
methods: {
showData() {
console.log(this.selectedValue)
}
},
})
</script>
运行效果
1.3 综合案例：购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
<style>
#box ul{
list-style: none;
width: 60%;
margin: auto;
border: 1px solid black;
padding: 10px;
}
#box ul li{
display: flex;
justify-content: space-around;
margin-top: 10px;
border-bottom: 1px dashed #cccccc;
}
#box ul li:last-child{
border-bottom: none;
}
#box ul li img{
width: 100px;
}
.all{
width: 60%;
margin: auto;
}
</style>
</head>
<body>
<div id="box">
<div class="all" v-if="list.length === 0">购物车空空如也</div>
<template v-else>
<div class="all"><input type="checkbox" v-model="isChecked" @change="allCheck()">全选|全不选</div>
<ul>
<li v-for="(item,index) in list" :key="item.id">
<div>
<!-- 将事件商品对象item绑定到value中，当选中当前商品时，item作为元素保存在checkGroup数组中，方便后面计算时使用 -->
<input type="checkbox" v-model="checkGroup" :value="item" @change="isAllCheck()"/>
</div>
<div>
<img :src="item.pic" alt="">
</div>
<div>
<div>名称:{{item.name}}</div>
<div>价格：￥{{item.price}}</div>
</div>
<div>
<button @click="item.number--" :disabled="item.number===1">-</button>
<span>{{item.number}}</span>
<button @click="item.number++" :disabled="item.number===item.limit">+</button>
</div>
<div>
<button @click="deleteGood(index,item.id)">删除</button>
</div>
</li>
</ul>
<div class="all">总金额: {{totalPrice()}}</div>
</template>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
isChecked:false,
checkGroup:[],
list:[
{
name:"商品1",
price:10,
number:1,
id:1,
limit:5,//限购
pic:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689157983,3552298815&fm=26&gp=0.jpg"
},
{
name:"商品2",
price:20,
number:5,
id:2,
limit:8,//限购
pic:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689157983,3552298815&fm=26&gp=0.jpg"
},
{
name:"商品3",
price:30,
number:10,
id:3,
limit:15,//限购
pic:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689157983,3552298815&fm=26&gp=0.jpg"
},
{
name:"商品4",
price:8,
number:6,
id:4,
limit:18,//限购
pic:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689157983,3552298815&fm=26&gp=0.jpg"
},
{
name:"商品5",
price:14,
number:2,
id:5,
limit:7,//限购
pic:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689157983,3552298815&fm=26&gp=0.jpg"
}
]
},
methods:{
totalPrice(){
var total = 0;
this.checkGroup.forEach((ele)=>{
total += ele.price * ele.number;
})
return total
},
//删除商品
deleteGood(index,goodId){
//删除原商品
this.list.splice(index,1);
//更新选中的商品
this.checkGroup = this.checkGroup.filter(ele => ele.id !== goodId)
//删除单个商品时也要检测是否全部被选中
this.isAllCheck();
},
//全选全不选
allCheck(){
if(this.isChecked){
this.checkGroup = this.list
}else{
this.checkGroup = [];
}
},
//选择单个商品时，判断是否为全部选中
isAllCheck(){
if(this.checkGroup.length === this.list.length){
this.isChecked = true;
}else{
this.isChecked = false;
}
}
}
})
</script>
</body>
</html>
1.4 表单修饰符：
- .lazy:失去焦点时再更新数据
<div id="box">
<!-- .lazy：失去焦点后才更新myVal的值 -->
<input type="text" v-model.lazy="myVal">|{{myVal}}|
<button @click="handelTest()">test</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
myVal : 8
},
methods:{
handelTest(){
console.log(this.myVal);
console.log(typeof this.myVal);
}
}
})
</script>
- .number：将value转换成number类型的值
<div id="box">
<!-- .number修饰符，将input的value转换成了数字 -->
<input type="text" v-model.number="myVal">|{{myVal}}|
<button @click="handelTest()">test</button>
</div>
- .trim：去年value前后空格
<div id="box">
<input type="text" v-model.trim="myVal">|{{myVal}}|
<button @click="handelTest()">test</button>
</div>
以上是关于05-vue表单绑定与购物车实例的主要内容，如果未能解决你的问题，请参考以下文章