vue复选框的用法，单个,多个复选框（简单demo代码全）点击复选框事件

最新推荐文章于 2024-07-30 16:26:17 发布

就像风1样

最新推荐文章于 2024-07-30 16:26:17 发布

阅读量8.3k

点赞数 3

分类专栏： Vue vue专栏文章标签： vue 复选框单个复选框多个复选框

本文链接：https://blog.csdn.net/qq_42221334/article/details/87543636

版权

本文提供了一个Vue复选框的简单DEMO，包括单个和多个复选框的实现。示例代码中展示了复选框的默认样式，并提及可以通过自定义CSS提升视觉效果。同时，分享了点击复选框事件的处理方法，更多Vue相关技巧可参考作者的Vue专栏。

摘要由CSDN通过智能技术生成

上图

样式是默认的，其实自己可以改些CSS样式更好看些

代码全：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 单个,多个复选框</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{
  { checked }}</label>
	
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>