11111111111111111111111111111111111111111111111111111111111111111
哇同款头像,代码如下，详细看注释
<!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>
如有帮助请采纳回答~ 谢谢
这种需求，封装一个方法来实现更合适
练级选择框。组件库里有比如element-ui,antd vue.
您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps: 问答会员年卡【8折】购 ，限时加赠IT实体书，即可 享受50次 有问必答服务，了解详情>>>https://t.csdnimg.cn/RW5m