vuejs怎样实现列表中checkbox的双向绑定及初始化渲
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs怎样实现列表中checkbox的双向绑定及初始化渲相关的知识，希望对你有一定的参考价值。
1.双向绑定可以绑定到同一个数组
<input type="checkbox" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: checkedNames | json </span>
这样可以不做任何处理，获得所有checked的checkbox。
2.可是如果需要初始化渲染，一部分checkbox被预选中，v-model需要绑定一个boolen值checked:
<tr v-for="item in list">
<td>
<input type="checkbox" :value="item.value" v-model="item.checked" />
</td>
</tr>
new Vue(
el: 'body',
data:
list: [checked:true,value:'a',checked:false,value:'b']
);
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
<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 | json </span>
这样可以不做任何处理，获得所有checked的checkbox。
可是如果需要初始化渲染，一部分checkbox被预选中，v-model需要绑定一个boolen值checked:
<tr v-for="item in list">
<td>
<input type="checkbox" :value="item.value" v-model="item.checked" />
</td>
</tr>
new Vue(
el: 'body',
data:
list: [checked:true,value:'a',checked:false,value:'b']
);
利用 filter ， map 来完成
methods:
getChecked: function()
// 先透过 filter 筛选出 checked 为 true 的 item
// 在透过 map 只回传 item 的 value
return this.list.filter(item => item.checked).map(item => item.value)
vuejs
vuejs数据双向绑定
下面我们来实现数据双向绑定的例子，我们使用vuejs的v-model属性
注意
v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。vuejs双向绑定并不能适用于所有的html表单，限制为input、select、textarea、components。
创建vue-2.html并编辑为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Vuejs简单示例</title> <!--引入开发版本vue.js，在开发版本中会有很多友好的提示--> <script src=‘./vue.js‘></script> </head> <body> <!--定义一个id为demo的div--> <div id="demo"> <!--此处的msg为在vuejs中定义的变量，放在两个花括号中--> <h1>Hello {{msg}}</h1> <!--此处我们创建一个文本框并定义它的v-model的属性的内容为我们在vue中定义的msg--> <input type="text" v-model="msg"> </div> <script> <!--实例化vuejs--> new Vue({ <!--el指定的id为css选择器--> el:‘#demo‘, <!--我们的变量统统放到data中--> data:{ <!--此处声明的变量msg内容为实验楼--> msg:‘实验楼‘ } }) </script> </body> </html>
el表示在html中哪个部分起作用，语法类似jquery的节点选择器，在这里我们看到它选择了一个ID
以上是关于vuejs怎样实现列表中checkbox的双向绑定及初始化渲的主要内容，如果未能解决你的问题，请参考以下文章