|
[Vue.js]学习笔记-Vue.js表单-checkbox全选与取消全选
导读部分
教程部分
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
本次我们来学习Vue.js的表单处理， 就是页面上的表单元素。
我们通过v-model指令在表单控件元素上创建双向的数据绑定。
上面我们学习了Vue.js的页面表单元素的基本用法，今天主要说个大家在做页面时， 经常会碰到的一个内容， 即页面复选框的全选与取消全选操作。
全选与取消全选在很多地方都有用到， 只有有列表，对列表有操作，基本上就能用到，本次主要通过实例来学习
实例：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-全选与取消全选-苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>
全选：
</p>
<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
<label for="checkbox">
{{checked}}
</label>
<p>
多个复选框：
</p>
<input type="checkbox" id="sufeinet" value="sufeinet" v-model="checkedNames">
<label for="sufeinet">
sufeinet
</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">
Google
</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">
taobao
</label>
<br>
<span>
选择的值为:{{checkedNames}}
</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: false,
checkedNames: [],
checkedArr: ["sufeinet", "Taobao", "Google"]
},
methods: {
changeAllChecked: function() {
if (this.checked) {
this.checkedNames = this.checkedArr
} else {
this.checkedNames = []
}
}
},
watch: {
"checkedNames": function() {
if (this.checkedNames.length == this.checkedArr.length) {
this.checked = true
} else {
this.checked = false
}
}
}
})
</script>
</body>
</html>
默认初始加载
在全选下面的复选框勾选， 显示效果如下：
而当我们在Google上， 取消掉勾选，会是什么结果呢？
可以看到， 取消掉Google选中时， 页面的全选会直接变成flase， 并取消掉选中
| 
窥视卡
雷达卡
发表于 2018-12-26 17:14:48
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2018-12-27 09:39:09
