vue的checkbox或多选的select的代码例子
另外一种实现checkbox的vue绑定方法代码：
给v-model绑定一个相同的数组类型的属性：
<div id="app">
<label>jack<input type="checkbox" v-model="whom" value="jack"/></label>
<label>bob<input type="checkbox" v-model="whom" value="bob"/></label>
<label>alice <input type="checkbox" v-model="whom" value="alice"/></label>
<p>已选：{{whom.join('|')}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
whom: []
}
})
</script>
实现select多选的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../js/vue2.js"></script>
<script src="../js/vue-resource.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected" multiple>
<option v-for="item in items" v-bind:value="item.value">{{item.text}}</option>
</select>
<span>已选:{{selected}}</span>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
items: [{ text: 'A', value: 'a' }, { text: 'B', value: 'b' }, { text: 'C', value: 'c' }],
selected: []
}
});
</script>
</body>
</html>
只需要在select标签中写入multiple属性(同时vue中，selected变量初始化为一个空数组)。
vue的checkbox或多选的select的代码例子的更多相关文章
- jQuery checkbox的全选与反选
1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...
- JQuery实现的 checkbox 全选；<select>下拉框功能
1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...
- jquery checkbox 选中 全选 插件
checkbox 选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...
- 【JavaScript】checkBox的多选行<tr>信息获取
页面的列表table显示(后台model.addAttribute("page", page);传来page信息,page通过foreach标签迭代展示表格数据): <!-- ...
- kndo grid：通过checkbox 实现多选和全选
在kendo grid 里要想通过checkbox 实现多选和权限,我们就要通过templeate 和input 标签对kendo grid 进行自定义 1. 在column 里面加入一列checkb ...
- VUE实现简单的全选/全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- checkbox 的全选与全不选
checkbox 的全选与全不选 只需要调用 cekAll.check();方法,这个方法接收两个参数: 参数一: 全选按钮的 id 以字符串的形式写 参数二: 其他 checkbox 的 name ...
- GridView中实现CheckBox的全选
GridView中实现CheckBox的全选 用服务器端的方法: 在页面上放一个gridview控件,配置好数据源,编辑列, <asp:GridView ID="GridView1&q ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
随机推荐
- WPF中 PropertyPath XAML 语法
原文:WPF中 PropertyPath XAML 语法 PropertyPath 对象支持复杂的内联XAML语法用来设置各种各样的属性,这些属性把PropertyPath类型作为它们的值.这篇文章讨 ...
- 大型项目使用Automake/Autoconf完成编译配置（标准的编译过程已经变成了简单的三部曲：configure/make/make install,）
使用过开源C/C++项目的同学们都知道,标准的编译过程已经变成了简单的三部曲:configure/make/make install, 使用起来很方便,不像平时自己写代码,要手写一堆复杂的Makefi ...
- 【 D3.js 入门系列 --- 9.3 】 弦图生产
我个人的博客: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 弦图( Chord ),主要用于表示两个节点之间的联系.例如以下图: ...
- 《Planet Earth II》观看笔记
carrion:n. 腐肉:臭尸:不洁之物 cub:n. 幼兽:不懂规矩的年轻人:chick; n. 小鸡:小鸟:少妇 herd:兽群: 1. 高频单词 terrain:n. [地理] 地形,地势:领 ...
- ASP.NET Core Identity 配置 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Identity 配置 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 配置 上一章节我们简单介绍了下 Id ...
- 【LeetCode】LRU Cache 解决报告
插话:只写了几个连续的博客,博客排名不再是实际"远在千里之外"该.我们已经进入2一万内. 再接再厉.油! Design and implement a data structure ...
- WPF － 本质：数据和行为
原文:WPF - 本质:数据和行为 如果自己来做一个UI框架,我们会首先关注哪些方面?我想UI框架主要处理的一定包括两个主要层次的内容,一个是数据展现,另一个就是数据操作,所以UI框架必须能够接收各种 ...
- OA 框架
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
- MVC 调试路由
1.添加引用RouteDebug.dll 2 修改Global.asax,切记调试过后要删掉 using System;using System.Collections.Generic;using S ...
- nodejs timer block-timer timer-ease
https://www.npmjs.org/package/block-timer https://www.npmjs.org/package/timer-ease 来自为知笔记(Wiz)