前端vue需求,做几个Checkbox ,点击那个Checkbox ,然后Checkbox 的值进入input中
时间: 2023-08-18 07:06:16 浏览: 226
好的,您需要在Vue中实现多个Checkbox,当点击其中一个Checkbox时,将其值传递到输入框中。下面是一个示例代码:
```html
<template>
<div>
<div v-for="(item, index) in checkboxList" :key="index">
<input type="checkbox" :id="item" :value="item" v-model="checkedList">
<label :for="item">{{ item }}</label>
</div>
<input type="text" v-model="inputValue">
</div>
</template>
<script>
export default {
data() {
return {
checkboxList: ['选项1', '选项2', '选项3'], // Checkbox选项列表
checkedList: [], // 选中的Checkbox列表
inputValue: '' // 输入框的值
}
},
watch: {
checkedList: function(newVal) {
this.inputValue = newVal.join(','); // 将选中的Checkbox值拼接成字符串,赋值给输入框
}
}
}
</script>
```
在上面的代码中,我们使用了一个`v-for`指令来遍历`checkboxList`数组,生成多个Checkbox。每个Checkbox都绑定了一个`v-model`指令,用于实现双向数据绑定,当Checkbox被选中时,它的值会被添加到`checkedList`数组中。
我们使用一个`watch`属性来监听`checkedList`数组的变化,当数组发生变化时,我们将其值拼接成字符串,赋值给输入框的`inputValue`属性。这样,当用户选择Checkbox时,输入框中的值就会实时更新。
阅读全文