木叶-袁 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条)

报告相同问题？

悬赏问题

  • ¥20 使用Photon PUN2解决游戏得分同步的问题
  • ¥15 微带串馈天线阵列每个阵元宽度计算
  • ¥15 keil的map文件中Image component sizes各项意思
  • ¥30 BC260Y用MQTT向阿里云发布主题消息一直错误
  • ¥20 求个正点原子stm32f407开发版的贪吃蛇游戏
  • ¥15 划分vlan后，链路不通了？
  • ¥20 求各位懂行的人，注册表能不能看到usb使用得具体信息，干了什么，传输了什么数据
  • ¥15 Vue3 大型图片数据拖动排序
  • ¥15 Centos / PETGEM
  • ¥15 划分vlan后不通了