ZUCC_移动应用交互设计VUE3.0_LAB8自定义指令实现全选

最新推荐文章于 2022-12-28 18:10:23 发布

肥鸽子咕咕咕

最新推荐文章于 2022-12-28 18:10:23 发布

阅读量833

点赞数 2

分类专栏： VUE ZUCC 文章标签： vue.js javascript 交互

本文链接：https://blog.csdn.net/qq_54074936/article/details/124228601

版权

ZUCC 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

VUE

7 篇文章 0 订阅

订阅专栏

使用自定义指令实现多选框的全选

代码如下：

<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>