正文

vue中全选和取消

IP云
IP云V管理员/5 阅读
08/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、效果预览

2、index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
<!--<h2>{{title}}</h2>-->
<li v-for="(item,index) in productList">
<div >产品名称：{{item.productName}}</div>
<!-- v-bind:class="{'check':item.checked}"这里的check用的是单引号-->
<a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectedProduct(item);">
</a>
</li>
<div>
<!--<span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAllFlag=true"></span>-->
<!--注意不要将true写成ture，还要将div写到vue的作用范围内的div中，即#app这个div中-->
<span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAll(true);"></span>
<a href="" class="item-del-btn" @click="checkAll(false);">取消全选</a>
</div>
</div><script src="js/lib/vue.min.js"></script>
<script src="js/lib/vue-resource.min.js"></script>
<script src="js/cart.js"></script>
</body>
</html>

3、cart.js

/**
* Created by kk on 2017/4/16.
*/
new Vue({
el:"#app",
data:{
// title:"hello vue"
totalMoney:0,
productList:[],
checkAllFlag:false
},
filters:{}
},
mounted:function () { }) },
methods:{ selectedProduct:function (item) {
//alert("1");
if(typeof item.checked=="undefined"){
//Vue.set(item,"checked",true);//全局注册checked
this.$set(item,"checked",true);//局部注册checked
}
else {
item.checked=!item.checked;
}
},
checkAll:function (flag) {
this.checkAllFlag=flag;
var _this=this;
this.productList.forEach(function (item,index) {
if(typeof item.checked=="undefined"){
_this.$set(item,"checked",_this.checkAllFlag);
}else {
item.checked=_this.checkAllFlag;
}
})
}
}});
Vue.filter("money",function (value,type) {
return "￥"+value.toFixed(2)+type;
});