vue 复选框

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

千鸟渡落日

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

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： VUE 前端

本文链接：https://blog.youkuaiyun.com/tangweiee/article/details/95632835

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue.js中实现复选框功能，包括展示的效果以及具体的代码实现步骤，帮助开发者理解Vue组件化开发中的复选框操作。

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

1.效果如下

2.代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue TEST</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
.class2{
  background: #005959;
  color: #eee;
}
.class3{
  background: #b0f;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
	<p>出门必备清单</p>
<label for="r1">钥匙</label><input type="checkbox" v-model="use1" id="r1">
<label for="r2">手机</label><input type="checkbox" v-model="use2" id="r2">
<label for="r3">太阳伞</label><input type="checkbox" v-model="use3" id="r3">
	<br><br>
  <div v-bind:class="{'class1': use1}">
    get√钥匙
  </div>
  <div v-bind:class="{'class2': use2}">
    get√手机
  </div>
  <div v-bind:class="{'class3': use3}">
    get√太阳伞
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
	  use1: false,
	  use2: false,
	  use3: false
  }
});
</script>
</body>