<!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. Java基础学习 —— 对象的克隆
			
    对象的克隆分为对象的浅克隆和深克隆 一.对象的浅克隆 注意事项: 1.如果一个对象需要调用clone的方法克隆,那么该对象必须要实现Cloneable接口 2.Cloneable对象只是一个标识对象, ...
    
			
    2. 
						
  2. 个人作业-2 英语学习APP分析
			
    产品: 必应词典 PC版 第一部分:调研,评测 1.对于这款产品的第一感觉是界面做的有点生硬粗糙,而且界面有种很空的感觉,界面美化做的不是很好,第一印象不是很喜欢.不过一点,就是把单词的近义词反义词放 ...
    
			
    3. 
						
  3. 团队作业4---第一次项目冲刺（ALpha）版本 第七天
			
    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 a.完成所有基础功能 b.正在进行测试调试 四.困难与问题 1.随着测试出现了大大小小的一些BUG,但是由于原来写的时候思维定 ...
    
			
    4. 
						
  4. 201521123109《java程序设计》第五周学习总结
			
    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 2. 书面作业 作业参考文件下载 1.代码阅读:Child压缩包内源代码 1.1 ...
    
			
    5. 
						
  5. Java课程设计 - 学生基本信息管理
			
    团队名称.团队成员介绍(需要有照片) 团队名称:此艺兴非彼艺兴 团队成员: 王兴:女,积极上进 曾艺佳:女,积极上进 项目git地址 StudentManage项目 项目git提交记录截图(要体现出每 ...
    
			
    6. 
						
  6. 201521123009 《Java程序设计》第13周学习总结
			
    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 从上图来看, ...
    
			
    7. 
						
  7. 201521123066 《Java程序设计》第十四周学习总结
			
    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) - ...
    
			
    8. 
						
  8. mshadow的原理--MXNet
			
    mshadow的原理--MXNet 这文章主要解释了表达式模板的工作原理(也是mshadow的主要原理),文章的前半部分是翻译自exp-template/README.md.我们会解释它为什么会影响编 ...
    
			
    9. 
						
  9. 【 js 基础 】关于this
			
    this 关键字是 Javascript 中很特别的一个关键字,被自动定义在所有函数的作用域中.this提供了一种更优雅的方式隐式"传递"一个对象的引用.今天就来说说 this 的 ...
    
			
    10. 
						
  10. Codeforce E. Fire
			
    E. Fire time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...
    
			
    11.