vue中checkbox组的使用

最新推荐文章于 2025-06-16 03:14:02 发布

洛神赋在csdn

最新推荐文章于 2025-06-16 03:14:02 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_23143555/article/details/80724339

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单示例，该示例通过复选框展示了如何进行双向数据绑定，并利用v-model和v-on指令来控制显示隐藏的列表。这个例子适合初学者理解Vue的基本概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<script src='js/vue.js'></script>
</head>
<body>
<div id="example">
<input type='checkbox' id='china' value='china' v-model='countries'/>
<label for='china'>china</label>
<input type='checkbox' id='japan' value='japan' v-model='countries'/>
<label for='japan'>japan</label>
<input type='checkbox' id='english' value='english' v-model='countries'/>
<label for='english'>english</label><br>
<input type='button' v-on:click="show"/>显示<br>
<ul v-if='flag'>
<li v-for="country in countries">{{country}}</li>
</ul>
</div>
</body>

<script type='text/javascript'>
new Vue({
el: '#example',
data: {
flag: true,
countries: []
},
methods: {
show: function() {
this.flag = !this.flag;
}
},
computed: {

},
created() {

}
});
</script>
</html>