木叶-袁 2021-06-16 19:48 采纳率: 50%
浏览 30
已采纳

怎么实现一层一层的判断？select组建可以吗？还是有其他简单的方法

11111111111111111111111111111111111111111111111111111111111111111

  • 写回答

4条回答 默认 最新

  • iMingzhen 2021-06-16 20:43
    关注

    哇同款头像,代码如下，详细看注释

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{items}}
      <div v-for="(item,index) in items" :key="item.id">
        {{ item.name }}
        <!-- @change 修改checkbox状态时触发changeCheckbox函数 -->
        <!-- disabled 除了第一个多选框，只要上一个多选框没选中就禁用 -->
        <input
          @change="changeCheckbox(item.checked,index)" 
          type="checkbox"
          v-model="item.checked"
          :disabled="index>0 && !items[index-1].checked"
        />
      </div>
    </div>
    <!-- 引入vue cdn -->
    <script
      crossorigin="anonymous"
      integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg=="
      src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"
    ></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            items: [
              { name: "1", checked: false},
              { name: "2", checked: false},
              { name: "3", checked: false},
              { name: "4", checked: false},
            ],
          };
        },
        methods: {
          changeCheckbox(checked, index) {
            if (!checked) {
              // 取消勾选时，将该下标以及之后的选中状态去除
              for (let i = index; i < this.items.length; i++)
                this.items[i].checked = false;
            }
          },
        },
      });
    </script>
  </body>
</html>

    如有帮助请采纳回答~ 谢谢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥50 求解vmware的网络模式问题
  • ¥24 EFS加密后，在同一台电脑解密出错，证书界面找不到对应指纹的证书，未备份证书，求在原电脑解密的方法，可行即采纳
  • ¥15 springboot 3.0 实现Security 6.x版本集成
  • ¥15 PHP-8.1 镜像无法用dockerfile里的CMD命令启动 只能进入容器启动，如何解决？(操作系统-ubuntu)
  • ¥30 请帮我解决一下下面六个代码
  • ¥15 关于资源监视工具的e-care有知道的嘛
  • ¥35 MIMO天线稀疏阵列排布问题
  • ¥60 用visual studio编写程序，利用间接平差求解水准网
  • ¥15 Llama如何调用shell或者Python
  • ¥20 谁能帮我挨个解读这个php语言编的代码什么意思？