使用自定义指令实现多选框的全选
代码如下:
<template>
<div v-for="(item,index) in games">
<input type="checkbox" :checked = "item.checked" >{{item.name}}
</div>
<button v-check @click="choseAll">全选</button>
<button v-uncheck @click="unChoseAll">取消全选</button>
games:[
{
name:'足球',
checked:{{games[0].checked}}
},
{
name:'篮球',
checked:{{games[0].checked}}
},
{
name:'羽毛球',
checked:{{games[0].checked}}
},
],
</template>
<script>
import { reactive, toRefs, computed, watch,onMounted} from "vue";
export default {
directives:{
check:{
inserted:(el)=>{
el.click()
}
},
uncheck:{
inserted:(el)=>{
el.click()
}
},
},
setup(){
const state = reactive({
games:[
{
name:'足球',
checked:false
},
{
name:'篮球',
checked:false
},
{
name:'羽毛球',
checked:false
},
],
})
const choseAll = ()=>{
for(let i=0; i<state.games.length; i++){
state.games[i].checked = true;
}
}
const unChoseAll = ()=>{
for(let i=0; i<state.games.length; i++){
state.games[i].checked = false;
}
}
return {
...toRefs(state),
choseAll,
unChoseAll
}
},
}
</script>
<style>
</style>