vue实现购物车的小功能
1.全选/反选/删除
代码如下:方法1:
<template>
<div>
<span>全选</span>
<input type="checkbox" v-model="isAll">
<button @click="btn">反选</button>
<ul>
<li v-for="(item,index) in arr" :key="index">
<input type="checkbox" v-model="item.cked">
<span>{{item.name}}</span>
</li>
</ul>
<!-- <span @click="del">全部删除</span> -->
</div>
</template>
<script>
export default {
data(){
return{
arr:[
{name:"跳舞",cked:false},
{name:"唱歌",cked:false},
{name:"睡觉",cked:false},
{name:"吃饭",cked:false}
]
}
},
computed: {
isAll: {
set(val) {
//1.全选框 - 选中状态(false/true)
this.arr.forEach((item) => (item.cked = val));
console.log(val);
},
get() {
//2.统计小选框状态 -> 全选状态
//every口诀:查找数组里“不符合”条件,直接原地返回false
return this.arr.every((item) => item.cked === true);
},
},
},
methods: {
btn() {
//3.让数组里对象的cked属性取反再赋予回去
this.arr.forEach((item) => (item.cked = !item.cked));
},
//删除
del(){
this.arr.splice(this.arr)
}
//注:此时全部删除会有一个小问题就是复选框会默认选中,把他的值设置为false即可
},
}
</script>
<style>
</style>
代码如下:方法2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li>
<input type="checkbox" v-model="ckall" @click="btnall">
<span>全部</span>
</li>
<li v-for="(item,index) in arr" :key="index">
<input type="checkbox" v-model="item.ckbox" @click="jia(index)">
<span>{{item.title}}</span>
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
ckall:false,
id:0,
arr:[
{title:"唱歌",ckbox:false},
{title:"跳舞",ckbox:false},
{title:"吃饭",ckbox:false},
{title:"睡觉",ckbox:false},
]
},
methods:{
btnall(){
for (var i=0;i<=this.arr.length;i++) {
if(this.ckall==false){
this.arr[i].ckbox=true;
this.id=this.arr[i].ckbox.length
}else{
this.arr[i].ckbox=false;
this.id=0
}
}
},
jia(index){
if(this.arr[index].ckbox==false){
this.id++;
}else{
this.id--
}
if(this.id==this.arr.length){
this.ckall=true
}else{
this.ckall=false
}
}
}
})
</script>
</html>
小结:应用了数据的双向绑定,用数据将数据渲染到页面,两者区别前者方法简便通过vue计算属性和forEach、every方法,后者比较繁琐通过js基础if判断。