vue实现全选反选按钮
<template>
<div class="orderinfo">
<div id="example-3">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
</div>
<div>
<input type="checkbox" id="checkbox" v-model="checked"
@change="allchooseBtn">
<label for="checkbox"> 全选</label>
</div>
<!-- <span>选择的项目: {{ checkedNames }}</span>
<span>全选按钮是否选中{{checkbox}}</span> -->
</div>
</template>
<script>
export default {
name: "Orderinfo",
data() {
return {
checked: false,
checkedNames: []
};
},
mounted() {},
watch: {
//监听复选按钮里的值 小于3没有全选 否则是全选
checkedNames: function(newQuestion, oldQuestion) {
console.log(newQuestion);
if (newQuestion.length < 3) {
this.checked = false;
} else {
this.checked = true;
}
},
//不建议用下面的方法
//监听单选按钮里的值 如果为true表示选中 复选里的值为全部选中的状态 否则清空
//checked: function(newQuestion, oldQuestion) {
// console.log(newQuestion);
// if (newQuestion) {
// this.checkedNames = ["Jack", "John", "Mike"];
//} else {
// this.checkedNames = [];
// }
},
},
methods: {
allchooseBtn() {
let that = this;
if (that.checked) {
that.checkedNames = ["Jack", "John", "Mike"];
} else {
that.checkedNames = [];
}
}
}
};
</script>
<style scoped lang="scss">
</style>