原创

Vue中v-model的应用、函数使用、高阶函数

一、哪些函数是响应式的:

1.push 在后面追加数据

5.sort() 排序

6.reverse() 顺序翻转 abcd ----> dcba

红框中的方式修改数组中的数据时,界面没有响应式的效果

 

二、高阶函数:对数组的操作

1、filter函数,返回布尔值

返回值是true,则返回当前的值;如果返回值是false,则不返回当前值。循环判断数据里面的数据,直到完成;

2、map函数,对数组里面的值进行处理后,返回相应的值。循环判断数据里面的数据,直到完成。

3、reduce函数,可以理解为“合计”的一个动作

高阶函数的联合使用:

更简洁的写法:

实例:

 

三、v-model的用法:

1、data里面的message字段绑定到input的控件中,改变控件或者改变data里面message的值,都会相应变化,双向绑定。

修改message值:

修改控件值:

原理:

v-model与单项控件的使用:

PS:input里面的name属性,是在做表单的时候,相同名字的,则只能选择一个;但有v-model后,可以将name的属性去掉,效果也一样。

v-model跟单、多选框的使用:单选框对应布尔值,多选框对应数组

其中:label的作用是点击“同意协议”的文字也可以进行选择

v-model与select的应用:

单选:注意v-model的位置

多选:返回值是数组,同时需增加multiple的属性,界面上按shift、Ctrl键进行多选

值绑定:界面数据从后台获取,再将相关数据渲染到界面上,不再是界面上直接写死选项

注意循环时id要进行动态绑定v-bind!

 

v-model的修饰符

lazy:当回车或数据在失去焦点是才会更新内容;

number:可以让在输入框中输入的内容自动转换成数字类型;

trim:可以过滤字符串中首尾两边的空格。

 

正文到此结束
本文目录