<div id="app">
<input type="checkbox" v-model="sex" value="1" />足球
<input type="checkbox" v-model="sex" value="2" />篮球
<input type="checkbox" v-model="sex" value="3" />乒乓球
<br />
{{sex}}
<br />
<button v-on:click="clickall(true)">全选</button>
<button v-on:click="clickall(false)">取消全选</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
sex:[]
}
,
methods: {
clickall: function (flag) {
if (flag) {
_this = this;
this.sex = [];
$.each($(":checkbox"), function (i, v) {
_this.sex.push(v.value);
});
} else {
this.sex = [];
}
}
}
});
</script>
用自定义指令实现全选和取消全选
<div id="app">
<ul>
<li v-for="item in list">
<input type="checkbox" v-sel="item.checked" /> {{item.name}}
</li>
</ul>
<br />
{{list}}
<br />
<button v-on:click="clickall(true)">全选</button>
<button v-on:click="clickall(false)">取消全选</button>
</div>
<script type="text/javascript">
Vue.directive("sel", function (el, v) {
if (v.value) {
$(el).attr("checked", "checked");
} else {
$(el).removeAttr("checked");
}
});
var vm = new Vue({
el: "#app",
data: {
list: [{ name: "足球", checked: true }, { name: "篮球", checked: false }, { name: "乒乓球", checked: true }]
},
mounted:function() {
}
,
methods: {
clickall: function (flag) {
if (flag) {
this.list.forEach(function (v, i) {
v.checked = true;
});
} else {
this.list.forEach(function (v, i) {
v.checked = false;
});
}
}
}
});
</script>
