vuejs怎样实现列表中checkbox的双向绑定及初始化渲

Posted 2023-04-22

双向绑定可以绑定到同一个数组

<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)

参考技术A 选择Vue而不选择Angular，有下面几个原因，当然不是对每个人都适合：在API与设计

Vuejs——入门（单向绑定双向绑定列表渲染响应函数）

版权声明：出处http://blog.csdn.net/qq20004604

 

目录(?)[+]

 

参照链接：

http://cn.vuejs.org/guide/index.html

【起步】部分

 

本文是在其基础上进行补全和更详细的探寻

 

嗯，根据朋友的建议，我改投vue阵营了

 

 

（一）单向绑定

[javascript] view plain copy

 

 

1. <div id="app">  
2.     {{ message }}  
3. </div>  
4.   
5. <script>  
6.     new Vue({  
7.         el: ‘#app‘,  
8.         data: {  
9.             message: ‘Hello Vue.js!‘  
10.         }  
11.     })  
12. </script>  

①el应该表示绑定的意思，绑定id=app这个标签

也可以改为以下这样：

[javascript] view plain copy

 

 

1. <div class="app">  
2.     {{ message }}  
3. </div>  

[javascript] view plain copy

 

 

1. el: ‘.app‘,  

一样有效。

 

但如果是多个的话，只对第一个有效：

[html] view plain copy

 

 

1. <div class="app">  
2.     {{ message }}  
3. </div>  
4. <div class="app">  
5.     {{ message }}  
6. </div>  

Hello Vue.js!

{{ message }}

 

 

②data里的message变量，表示{{message}的值

 

 

（二）双向绑定

[javascript] view plain copy

 

 

1. <div id="app">  
2.     {{ message }}  
3.     <br/>  
4.     <input v-model="message"/>  
5. </div>  
6. <script>  
7.     new Vue({  
8.         el: ‘#app‘,  
9.         data: {  
10.             message: ‘Hello Vue.js!‘  
11.         }  
12.     })  
13. </script>  

效果是：

①input输入框里有初始值，值是data里的message属性的值；

 

②修改输入框的值可以影响外面的值；

 

 

（三）函数返回值

[javascript] view plain copy

 

 

1. <div id="app">  
2.     {{ message() }}  
3.     <br/>  
4.     <input v-model="message()"/>  
5. </div>  
6. <script>  
7.     new Vue({  
8.         el: ‘#app‘,  
9.         data: {  
10.             message: function () {  
11.                 return ‘Hello Vue.js!‘;  
12.             }  
13.         }  
14.     })  
15. </script>  

效果：

①输出值也是message的返回值；

②缺点：失去双向绑定！

 

 

（四）渲染列表

[javascript] view plain copy

 

 

1. <div id="app">  
2.     <ul>  
3.         <li v-for="list in todos">  
4.             {{list.text}}  
5.         </li>  
6.     </ul>  
7. </div>  
8. <script>  
9.     new Vue({  
10.         el: ‘#app‘,  
11.         data: {  
12.             todos: [  
13.                 {text: "1st"},  
14.                 {text: "2nd"},  
15.                 {text: "3rd"}  
16.             ]  
17.         }  
18.     })  
19. </script>  

 

v-for里的list，类似for in里面的i，

个人认为，

①可以把list in todos，理解为for list in todos

②然后把下一行的list.text理解为 todos[list].text

 

然后这个v-for标签在哪里，就是以他为单位进行多次复制。

 

 

（五）处理用户输入

[javascript] view plain copy

 

 

1. <div id="app">  
2.     <input v-model="message">  
3.     <input type="button" value="值+1" v-on:click="add"/>  
4.     <input type="button" value="值-1" v-on:click="minus"/>  
5.     <input type="button" value="重置归零" v-on:click="reset"/>  
6. </div>  
7. <script>  
8.     new Vue({  
9.         el: ‘#app‘,  
10.         data: {  
11.             message: 1  
12.         },  
13.         methods: {  
14.             add: function () {  
15.                 this.message++; //这步要加this才能正确获取到值  
16.             },  
17.             minus: function () {  
18.                 this.message--;  
19.             },  
20.             reset: function () {  
21.                 this.message = 0;  
22.             }  
23.         }  
24.     })  
25. </script>  

效果：

①对输入框的值，点击一次add按钮，则值+1；

②如果不能加，则像正常表达式加错了那样返回结果，例如NaN；

③data里的message的值，是初始值；

④methods里是函数集合，他们之间用逗号分隔；

⑤获取值的时候，要加上this，例如this.message获取的是message的值。

 

 

（六）多功能

[javascript] view plain copy

 

 

1. <div id="app">  
2.     <input v-model="val" v-on:keypress.enter="addToList">  
3.     <ul>  
4.         <li v-for="val in values">  
5.             {{val.val}}  
6.             <input type="button" value="删除" v-on:click="removeList($index)"/>  
7.         </li>  
8.     </ul>  
9. </div>  
10. <script>  
11.     new Vue({  
12.         el: ‘#app‘,  
13.         data: {  
14.             val: "1",  
15.             values: []  
16.         },  
17.         methods: {  
18.             addToList: function () {  
19.                 var val = parseInt(this.val.trim());  //注意，因为当上面的val是字符串类型的时候，才能用trim()，如果是数字类型，则用this.val  
20.                 if (val) {  
21.                     this.values.push({val: val});  
22.                 }  
23.                 this.val = String(val + 1);  
24.             },  
25.             removeList: function (index) {  
26.                 this.values.splice(index, 1);  
27.             }  
28.         }  
29.     })  
30. </script>  

效果：

①初始输入框内值为1；

②在输入框内按回车键，则会将输入框的内容转为数字，并添加到一个列表里，该列表里转换后的数字和一个删除按钮，并且输入框内的值，变为转为数字后的值加一。

如图：

 

③他的添加，利用的是双向绑定，将输入的值push到data里面的values这个数组之种，然后利用渲染列表的效果，输出多行值。

 

④在button标签里，函数的参数名给了一个参数，是该行索引，参数名是$index

 

⑤标签里，触发的函数的函数名，可以加括号，也可以不加括号，实测似乎是没有影响的。

 

 

 

（七）标签和API总结（1）

① {{ 变量名 }}

表示绑定的变量，调用时需要用this.变量名

 

② v-model=”变量”

双向绑定使用，如果input里不加任何type就是文本，如果加type就是type，例如：

[javascript] view plain copy

 

 

1. <input v-model="DATE" type="date"/>  
2. <li>{{DATE}}</li>  

就会将日期类型的输入框的值，和li标签显示的内容绑定在一起。

 

③ v-on:click=”函数名”

点击时触发该函数，可加()也可以不加，

$index作为参数表示索引，索引值从0开始。

 

 

④ v-for

双向绑定的在数组内容更新后，会实时更新，v-model也是；

类似for in语句，被多次使用的是

 

⑤ v-on:事件

即触发的事件，有click（点击），keypress（按键按下）

事件后面可以跟更具体的，例如keypress.enter是回车，keypress.space是空格等

更多的需要之查看

 

⑥ new vue

通过new一个vue的实例，然后传一个对象作为参数给这个实例；

其中：

el 表示绑定的模板（只会匹配到绑定的第一个）

data 表示数据，可以直接被取用，例如用在v-model或者是{{变量名}}中

methods 表示方法

 

⑦ 函数内部调用变量

通过this.变量名，例如：

[javascript] view plain copy

 

 

1. data: {  
2.     val: "1",  
3.     values: []  
4. },  
5. methods: {  
6.     addToList: function () {  
7.         console.log(this.val);  

这里的this.val就是上面的data.val，也是html里的{{val}}，也是v-model=”val”，但不是

[javascript] view plain copy

 

 

1. <li v-for="val in values">  
2.     {{val.val}}  
3.     <input type="button" value="删除" v-on:click="removeList($index)"/>  
4. </li>  

 

里面的val.val，至于原因，个人认为是这里的val处于v-for的作用域内，因此val in values 里的val其在作用域链中的优先级更高