vue计算属性computed实现表单的全选和全不选

柔光的暖阳◎ 2023-02-24 08:07 12阅读 0赞

**说明：** 页面使用BootStrap框架搭建

<div id="app">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">全选和反选</h3>
            </div>
            <div class="panel-body">
              <div class="checkbox">
                <label>
                  <input type="checkbox" v-model="chkAll" />
                  全选
                </label>
              </div>
    
              <ul class="list-group">
                <li class="list-group-item" v-for="(item) in list" :key="item.id">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" v-model="item.checked" />
                      {
       {item.name}}
                    </label>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <script src="./libs/vue.js"></script>
        <script> new Vue({ el: "#app", data: { list: [ { id: 1, name: "胡一菲", checked: false, }, { id: 2, name: "诺澜", checked: false, }, { id: 3, name: "曾小贤", checked: false, }, { id: 4, name: "张益达", checked: false, //默认不选中 }, { id: 5, name: "诸葛大力", checked: true, //默认选中 }, ], }, // computed计算属性：依赖的数据项改变之后进行重新计算 // 应用场景：数据改变之后会影响某一项结果 computed: { chkAll: { // 设置值,当点击全选按钮的时候触发 set(v) { this.list.forEach((item) => (item.checked = v)); }, // 取值,当列表中的选择改变之后触发 get() { return ( this.list.length === this.list.filter((item) => item.checked).length ); }, }, }, }); </script>

**实现效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: /images/20230209/0bb4724510264c598ec6a630ce222b59.png