<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="main">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>
<script>
    var example1 = new Vue({
        el:".main",
        data: {
            checkedNames: []
        }
    })
</script>
</body>
</html>

实现效果

												


											
Vue实现勾选后向数组都添加的更多相关文章
	

    
								
  1. Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能
		
    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
    
		
    2. 
						
  2. Bootstrap, 模态框实现值传递,自动勾选
		
    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...
    
		
    3. 
						
  3. Angular/Vue多复选框勾选问题
		
    此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...
    
		
    4. 
						
  4. Vue中组件化编码 完成任务的添加、删除、统计、勾选需求（实战练习三完结）
		
    上一个章节实现数据在组件之间的传递 .这一章主要是完成添加任务到任务栏.删除任务栏.统计任务完成情况.主要还是参数在各个组件之间的传递. 上一章节的链接地址:https://blog.csdn.net ...
    
		
    5. 
						
  5. 为何给CheckBox设置了checked属性还是没有勾选，行内样式都显示了checked
		
    为何给CheckBox设置了checked属性还是没有勾选,行内样式都显示了checked 正常情况下我们设置给CheckBox一个checked属性后一般都会选中 然而我今天在做案例的时候却遇到了类 ...
    
		
    6. 
						
  6. 弹框勾选datatable中的数据，点击保存后添加到另一个表中，同一个页面
		
    需求描述:做编辑的时候,点击添加按钮,弹出数据表table2,勾选弹出框中的数据,点击保存后能够添加到table1中,并且已经被添加到table1中的数据,在弹出框中显示已选,checkbox隐藏:t ...
    
		
    7. 
						
  7. tree的所有节点都勾选上或者取消勾选
		
    还有一个功能,就是让tree的所有节点都勾选上或者取消勾选,在api中找了一下有一个方法: check target 选中指定节点. 那我们只能是选中根节点后,实现全选. getRoot none 获 ...
    
		
    8. 
						
  8. Ztree加载完成后显示勾选节点
		
    ①前言:这个在度娘上没有搜到解决的办法,于是自己查看了ztree的API,发现其实还是比较简单的.做个笔记以备不时之需. ②需求: 像下图一样,在加载完成之后就显示需要勾选的项. ③解决方案: 首先页 ...
    
		
    9. 
						
  9. 解决el-tree lazy懒加载时，连续勾选前两个子节点后第二次进入默认选中时，将父节点也勾选的问题
		
    在用到el-tree的懒加载和默认勾选功能时,若第一次勾选前几个连续节点,第二次进入默认勾选时,由于el-tree子节点尚未完全加载(只加载出来前几个),默认勾选已经开始(已加载出来的子节点被默认勾选 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 第1阶段——uboot分析之通过nand命令读内核(8)
			
    本节主要学习: 详细分析UBOOT中"bootcmd=nand read.jffs2 0x30007FC0 kernel;bootm 0x30007FC0" 怎么实现nand命令读 ...
    
			
    2. 
						
  2. centos 7 && dotnet core 2.0 && nginx && supervisor
			
    前提 系统:centos 7 目录:/home/wwwroot/www.wuball.com dotnet core 2.0 官方指引 sudo rpm --import https://packag ...
    
			
    3. 
						
  3. MPLS LDP随堂笔记1
			
    LDP 的使用原因(对于不同协议来说) LDP的四大功能 发现邻居 hello 5s 15s 224.0.0.2 发现邻居关系 R1 UDP 646端口 R2 UDP 646端口 此时形成邻居 建立邻 ...
    
			
    4. 
						
  4. 软件工程（GZSD2015）学生博客列表
			
    2015年贵州师范大学软件工程课程学生博客列表 陈小丽 郑倩 唐洁 周娟 李利思 肖俊 罗文豪 周静 徐明艳 毛涛 邓洪虹 岳庆 李盼 安坤 何亚 涂江凤 张义平 杨明颢 杨家堂 胡贵玲 寿克霞 吴明 ...
    
			
    5. 
						
  5. Swing-GridBagLayout用法-入门
			
    注:本文内容转自:Java Layout总结-GridBagLayout.内容根据笔者理解稍有整理. GridBagLayout布局管理器:这就是最复杂的一个布局管理器了,网格包布局.在此布局中,组件 ...
    
			
    6. 
						
  6. 201521123019《Java程序设计》第1周学习总结
			
    一．本周章学习总结 1.了解了JDK和JRE的区别 2.学会用ALT+/快速写代码 3.成功安装JDK和Eclipse 4.初步了解JAVA的发展史 二．书面作业 1.为什么java程序可以跨平台运行 ...
    
			
    7. 
						
  7. 201521123013 《Java程序设计》第14周学习总结
			
    1. 本周学习总结 2. 书面作业 Q1. MySQL数据库基本操作 1.1 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 1.2 在自己建立的数据库上执行常见SQ ...
    
			
    8. 
						
  8. XML解析【介绍、DOM、SAX详细说明、jaxp、dom4j、XPATH】
			
    什么是XML解析 前面XML章节已经说了,XML被设计为"什么都不做",XML只用于组织.存储数据,除此之外的数据生成.读取.传送等等的操作都与XML本身无关! XML解析就是读取 ...
    
			
    9. 
						
  9. Eclipse中删除tomcat server 导致不能重新创建该版本的tomcat server
			
    在Eclipse中创建了一个Web工程后,需要将该工程部署到Tomcat中进行发布.有时就会遇到在New Server对话框中选择了Tomcat 6/7后却无法单击“Next”按钮的问题,如下图所示: ...
    
			
    10. 
						
  10. MySQL的一点浅显知识
			
    本人最近看了一本有关于MySQL的书籍<MySQL必知必会>,书中只写了一些基本知识,但是也基本涵盖了所有的MySQL的知识点.其余的比较高级的也只是在基础上进行扩展或者是优化,看完这本书 ...
    
			
    11.