The examples in this article share with you the specific code for vue to implement the all-select function for your reference. The specific content is as follows
Choose all ideas
1. Prepare tags, styles, js, prepare data
2. Display the data loop on the page, in li v-for
3. Select all box v-model = "isAll" //Total status
4. Small box v-model = "" //Single state
5. Small selection affects all selection... Define the calculation attribute isAll counts the status of small selection boxes. Every searches for the array that does not meet the conditions and directly returns false...Judges the status of each small selection box. As long as there is a small selection box that is not true, it is not checked, then return false, and the status of all selection boxes is false
6. Select all affects small selection... set(val) Set the status of all selection (true/false). Then traverse each small selection box to see the status of small selection box, and change its status to the status of all selection box.
<template>
<div>
<span>Select all:</span>
<input type="checkbox" v-model="isAll" />
<button @click="btn">Reverse selection</button>
<ul>
<li v-for="(obj, index) in arr" :key="index">
<input type="checkbox" v-model="" />
<span>{{ }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "Zhu Bajie",
c: false,
},
{
name: "Sun Wukong",
c: false,
},
{
name: "Tang Monk",
c: false,
},
{
name: "White Dragon Horse",
c: false,
},
],
};
},
computed: {
isAll: {
//Select all the effects of small selection set(val) {
//set(val) Set the selected status (true/false) //We manually set the state of selecting all boxes, and iterates over the c attributes of each object in the array, that is, iterates over the state of each small box, and changes its state to the state of val. ((obj) => ( = val));
},
//Small box selection affects all box selection get() {
//Judge whether the c attribute of each object in the array is equal to true, which means judging the status of each small box. As long as there is a small box state that is not true, it is not checked, then it returns false, and the status of all box selection is false // Every formula: Find the "not meeting" conditions in the array, and directly return false return ((obj) => === true);
},
},
},
methods: {
btn() {
//Realize the reverse selection //Transaction through each item in the array, let the c attribute of the object in the array be reversed and then assigned back ((obj) => ( = !));
},
},
};
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.