购物车小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="checkbox" name="" id="" value="全选" @change="handleChange" v-model="isAllChecked" />全选/全不选
<ul>
<li v-for="item in dataList"><input type="checkbox" v-model="checkArr" name="" id="" :value="item" @change="handleChangeSub" />
<button type="button" @click="item.number++">add</button>
{{ item.number }}
<button type="button" @click="del(item)">del</button>
{{ item }}
</li>
</ul>
<p>选择的商品: {{ getName() }}</p>
<p>总金额: {{ getSum() }}</p>
</div>
</body>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
checkArr:[],
isAllChecked:false,
dataList:[
{name:"商品1",price:10,number:1,id:"1"},
{name:"商品2",price:120,number:442,id:"2"},
{name:"商品3",price:150,number:13,id:"3"},
{name:"商品4",price:1110,number:42,id:"4"},
]
},
methods:{
getName(){
let name = '';
for(let i in this.checkArr){
name += this.checkArr[i].name+','
}
return name
},
getSum(){
let sum = 0;
for(let i in this.checkArr){
sum += this.checkArr[i].price*this.checkArr[i].number
}
return sum
},
handleChange(){
if(this.isAllChecked){
this.checkArr=this.dataList
}else{
this.checkArr=[]
}
},
handleChangeSub(){
if(this.checkArr.length == this.dataList.length){
this.isAllChecked = true
}else{
this.isAllChecked = false
}
},
add(e){
console.log(e,'增加1');
},
del(e){
if(e.number <= 0){
console.log('当前已经为0');
return false;
}else{
e.number--
}
}
}
})
</script>
</html>
- 学习了vue的双向绑定
使用vue的v-model实现双向绑定，它会根据控件类型自动选取正确的方法更新这些元素，v-model本身是一个语法糖，如下代码本质上是<input :value="test" @input="test = $event.target.value">其中@input是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入
{{ test}}
获取input数据，然后去修改input中数据会发现中数据随之改变。
- v-model是有修饰符的
<!-- 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步 -->
<input v-model.lazy="msg" >
<!--去除字符串首尾的空格-->
<input v-model.trim="msg">
<!--将数据转化为值类型-->
<input v-model.number="age" type="number">
-
v-model用于表单数据的双向绑定，背后就做了俩个操作
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
-
自定义组件使用v-model,应该有以下操作：
-
接收一个value prop
-
触发input事件，并传入新值
-
在原生表单元素中：
<input v-model="inputValue">
相当于
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">
在自定义组件中
<my-component v-model="inputValue"></my-component>
相当于
<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>
这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。
this.$emit('input', value)
