<!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. hdu 3342 拓扑排序 水
			
    好久没切题  先上水题! 拓扑排序! 代码: #include<iostream> #include<cstdio> #include<cstring> using ...
    
			
    2. 
						
  2. Android学习记录：获取联系人
			
    在AndroidManifest中申请读取联系人的权限 <uses-permission android:name = "android.permission.READ_CONTACT ...
    
			
    3. 
						
  3. MPLS VPN随堂笔记3
			
    跨域 ASBR之间运行MPBGP 1.配置AS内部IGP保证环回口互相可达,同时建立LDP邻居 (优先启用 mpls label rang 16 100)方便查看实验现象 2.配置PE1-PE2 PE ...
    
			
    4. 
						
  4. 201521123061 《Java程序设计》第七周学习总结
			
    201521123061 <Java程序设计>第七周学习总结 1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 贴上源 ...
    
			
    5. 
						
  5. 201521123013 《Java程序设计》第8周学习总结
			
    1. 本章学习总结 2. 书面作业 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 while(list.contains(str)) list.remove(str); Q2.统计文 ...
    
			
    6. 
						
  6. 201521123092《java程序设计》第三周学习总结
			
    #1. 本章学习总结 你对于本章知识的学习总结 #2. 书面作业 **Q1.  代码阅读 public class Test1 { private int i = 1;//这行不能修改 private ...
    
			
    7. 
						
  7. 201521123064 《Java程序设计》第13周学习总结
			
    本次作业参考文件 正则表达式参考资料 1. 本章学习总结 1.1 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. ① InetAddress(IP地址对应的类) InetAd ...
    
			
    8. 
						
  8. 201521123121 《Java程序设计》第12周学习总结
			
    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. Java流(Stream).文件(File)和IO Java.io包几乎包含了所有操作输入.输出需要的类.所有 ...
    
			
    9. 
						
  9. 201521123014 《Java程序设计》第11周学习总结
			
    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 Q1 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用sync ...
    
			
    10. 
						
  10. 生成/etc/shadow文件中的密码
			
    shadow文件的格式就不说了.就说说它的第二列--密码列. 通常,passwd直接为用户指定密码就ok了.但在某些情况下,要为待创建的用户事先指定密码,还要求是加密后的密码,例如kickstart文 ...
    
			
    11.