vue实现全选和反选功能
更新时间：2017年08月31日 14:54:44 作者：mystraight
这篇文章主要为大家详细介绍了vue实现全选和反选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现全选反选功能的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src = "vue.js"></script>
<body>
<div id = "test">
<input type='checkbox' v-model="checkBox.checked" class='input-checkbox' @click='checkedAll'>全选
<div v-for='checkb in checkboxData'>
<input type='checkbox' class='input-checkbox' @click="checkItem" v-model='checkBox.items[checkb.id]'>
{{checkb.value}}
</div>
</div>
</body>
<script>
var vue = new Vue({
el:"#test",
data:{
checkboxData:[
{
id:'1',
value:'苹果'
},{
id:'2',
value:'荔枝'
},{
id:'3',
value:'香蕉'
},{
id:'4',
value:'火龙果'
}
],
checkBox:{
checked:false,
items:{}
}
},
methods:{
checkedAll: function() {
var _this = this;
console.log(_this.checkboxData);
console.log(this.checkBox.items);
this.checkboxData.forEach(function (item) {
console.log(item.id);
_this.checkBox.items[item.id] = _this.checkBox.checked;
console.log(_this.checkBox.items);
});
//实现反选
},
checkItem:function(){
var unchecked = 0;
var _this = this;
this.checkboxData.forEach(
function(item) {
unchecked += (! _this.checkBox.items[item.id]) || 0;
});
_this.checkBox.checked = unchecked > 0 ? false : true;
}
}
})
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用vant-picker实现自定义内容，根据内容添加图标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue中的自定义属性并获得属性的值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本文主要介绍了el-tree loadNode懒加载的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了Vue项目build后,图片加载不出来的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
在vue中路由使用this.$router.go(-1)返回两次问题
这篇文章主要介绍了在vue中路由使用this.$router.go(-1)返回两次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要给大家介绍了关于Vue的组件中data选项为什么必须是函数的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-08-08
这篇文章主要介绍了vue中使用event.target.value踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue Router 为 Vue.js 应用提供了完整的路由解决方案,其中包括了组件间的数据传递功能,通过路由组件传参,我们可以轻松地在导航到新页面时传递必要的数据,本文将深入探讨如何使用 Vue Router 进行路由组件间的传参,并通过多个示例来展示其实现方式2024-09-09
Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库，这篇文章主要介绍了mint-ui在vue中的使用示例，这里整理了详细的代码,有需要的小伙伴可以参考下2018-04-04
这篇文章主要介绍了Vue实现二维码的展示及下载功能,其中downloadQRCode（）函数中的url为要下载的文件的路径,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-05-05
最新评论