我想用vue做什么：
-
计数已选中复选框
-
设置所有复选框以选中（或取消选中全部）
这是一个非常简化的模型 . 真正的网站包含以下限制：
-
复选框的数量发生变化 .
-
值总是不同的 .
-
我不想将所有input-attribute都放入Vue的数据部分
以下代码允许计算已选中复选框的数量 .
<html>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="checkbox" name="abc" value=1 v-model="cch">
<input type="checkbox" name="abc" value=2 v-model="cch">
Count: {{cch.length}}
</div>
<script>
new Vue({
el: '#app',
data: {
cch: [],
},
})
</script>
</body>
</html>
以下代码检查所有复选框（当然，如果chk = false，则取消选中复选框）：
<html>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="checkbox" name="abc" value=1 :checked="chk">
<input type="checkbox" name="abc" value=2 :checked="chk">
Checked: {{chk}}
</div>
<script>
new Vue({
el: '#app',
data: {
chk: true
},
})
</script>
</body>
</html>
似乎无法在同一输入标签中使用：checked和v-model . 我能做什么？
我添加了一个按钮，使所有复选框都已选中，我更改了名称 . 问题仍然存在：计数效果很好，但“全部”按钮没有任何效果 .
<html>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="checkbox" name="abc1" value=1 v-model="cch" :checked="chk">
<input type="checkbox" name="abc2" value=2 v-model="cch" :checked="chk">
Count: {{cch.length}}
<input type="button" @click="chk=!chk" value="all">
</div>
<script>
new Vue({
el: '#app',
data: {
cch: [],
chk: true
},
})
</script>
</body>
</html>
1 回答
您需要为每个复选框设置唯一的name-attribute . 这样他们就可以正常使用v-model .