复选框，vue如何绑定value

最新推荐文章于 2023-03-22 17:40:03 发布

原创最新推荐文章于 2023-03-22 17:40:03 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

vue 同时被 3 个专栏收录

119 篇文章

订阅专栏

91 篇文章

订阅专栏

业务

67 篇文章

订阅专栏

本文介绍在Vue.js中如何使用v-model实现checkbox组的双向数据绑定，并通过一个实例展示了如何在点击按钮时打印当前选中的checkbox值。此方法适用于需要收集用户多项选择的数据场景。

html:

<input type="checkbox" value="1" v-model="arr">
<input type="checkbox" value="2" v-model="arr">
<input type="checkbox" value="3" v-model="arr">
<button @click="fn">点击打印</button>

js:

export default {
		data() {
			return {
				arr:[1,2,3]

                  }
                },
        methods: {
			fn:function(){
				console.log(this.arr);
			}
                }
    }