Is木昜先生
2021-07-08 12:05
采纳率: 100%
浏览 140
已采纳

vue怎么实现全选获取value,vue的v-bind和v-model同时存在v-bind无效

html代码如下

        <input type="checkbox" v-model="checkAll">全选<br>
        <input type="checkbox" :value="v1" v-model="t" :checked="checkAll"><br>
        <input type="checkbox" :value="v2" v-model="t" :checked="checkAll"><br>
        <input type="checkbox" :value="v3" v-model="t" :checked="checkAll"><br>
        <div id="down">
          {{checkAll}}
          {{t}}
        </div>

js代码如下

new Vue({
      el:"#test",
      data:{
        checkAll:false,
        t:[],
        v1:"--1--",
        v2:"--2--",
        v3:"--3--",
      },
      methods:{

      }
    });

点击全选但是没有任何效果,
如果单个点击复选框的话,就可以成功的显示
需求是点击全选,会给数组t里面加三个复选框的value值

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

3条回答 默认 最新

  • 黑白猫妈 2021-07-08 14:40
    最佳回答

    来看,用watch监听可以实现,全选与非全选切换,如果数据多的话,其实可以直接把复选框的value直接放到一个数组里面,做全选的时候直接把数组项赋值给数组t比较方便

    <div id="box">
            <div>
                实打实大苏打
            </div>
            全选<input type="checkbox" v-model="checkAll"/><br>
            v1<input type="checkbox" :value="v1" v-model="t"><br>
            v2<input type="checkbox" :value="v2" v-model="t"><br>
            v3<input type="checkbox" :value="v3" v-model="t"><br>
            <div id="down">
              {{checkAll}}
              {{t}}
              {{v1}}
              {{v2}}
              {{v3}}
            </div>
        </div>
    
    <script type="text/javascript">
        var myvue = new Vue({
            el:'#box',
            data:{
                checkAll:false,
                t:[],
                v1:"--1--",
                v2:"--2--",
                v3:"--3--",
            },
            created() {
                console.log('成功了')
            },
            watch:{
                checkAll(newvalue, oldvalue){
                    if(newvalue){
                        this.t = [this.v1, this.v2, this.v3];
                    }
                },
                t: {
                    handler(newvalue, oldvalue) {
                        if(newvalue.length < 3){
                            this.checkAll = false;
                        }
                    },
                    deep: true
                }
            },
        })
    </script>
    
    
    
    评论
    解决 1 无用
    打赏 举报
查看更多回答(2条)

相关推荐 更多相似问题