GradyYoung 2021-07-08 12:05 采纳率: 100%
浏览 183
已采纳

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>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 我想通过python处理sybase IQ库的一些数据,但是不知道sybase IQ库怎么连接,之前连接都是用linux上的 dbisql
  • ¥15 安装llama-cpp-python==0.1.83失败
  • ¥20 管道轴向耦合水击问题
  • ¥60 补全networkx TODO部分。
  • ¥15 有内推吗,云计算linux运维方向
  • ¥30 sort cuteSV.vcf by bcftools用IGV可视化出现报错
  • ¥100 SOS!对STK中导出的天体图像进行质心提取有没有人做过啊
  • ¥15 python 欧式距离
  • ¥15 运行qteasy报错
  • ¥15 遗传算法解决有工序顺序约束的大规模FJSP问题