<!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. 网络传输编程之TCP
			
    网络传输编程之TCP   网络传输编程指基于各种网络协议进行编程,包括TCP编程,UDP编程,P2P编程.本节介绍TCP编程.     (1)TCP简介: TCP是TCP/IP体系中最重要的传输层协议 ...
    
			
    2. 
						
  2. [2017BUAA软工]第0次个人作业
			
    第一部分:结缘计算机 1.你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢? 我觉得我选择计算机系完全是误打误撞吧.当时我的分数上北航是没问题的,所以填专业时就是机械,电气,自动化,计算机等 ...
    
			
    3. 
						
  3. 201521123111《Java程序设计》第5周学习总结
			
    1. 本章学习总结 你对于本章知识的学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 2. 书面作业 1.代码阅读:Child压缩包内源代码 ...
    
			
    4. 
						
  4. 201521123072《java程序设计》第四次总结
			
    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.11.2 使用常规方法总结其他上课内容 一些小的方法归纳: 通过 instanceof 可以判断父类引用所引用的对象实例的实际类 ...
    
			
    5. 
						
  5. 201521123018 《Java程序设计》第2周学习总结
			
    1. 本章学习总结 * String类 * Java数组Array的使用 2. 书面作业 Q1.(1) 使用Eclipse关联jdk源代码,并查看String对象的源代码(截图)? (2)分析Stri ...
    
			
    6. 
						
  6. ubuntu下chromium浏览器flash插件安装
			
    ubuntu下chromium浏览器默认是不支持flash的,在新立德软件包中搜索flash得到的“Adobe Flash Player plugin installer”也没有什么卵用,因为装完以后 ...
    
			
    7. 
						
  7. java第十二次作业
			
    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
    
			
    8. 
						
  8. 201521123095 《Java程序设计》第10周学习总结
			
    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 Q1.finally 题目4-2 1.1 截图你的提交结果( ...
    
			
    9. 
						
  9. 201521123112《Java程序设计》第13周学习总结
			
    1. 本周学习总结 协议的概念是网络中为了通信而建立的规则,常用的应用层协议有http,ftp等. 测试计算机之间的网络是否连通可以使用ping命令. 可以使用IP+端口号的方法来确定数据包是发给哪个 ...
    
			
    10. 
						
  10. Java课程设计-计算器 丁树乐（201521123024）
			
    1.团队课程设计博客链接 http://www.cnblogs.com/br0823/p/7064407.html 2.个人负责模块或任务说明 界面优化 各类之间拼接 3.自己的代码提交记录截图 4. ...
    
			
    11.