02、JS高阶函数、v-model表单的双向绑定

标签：input   htm   hang   ==   回调   i++   const   check   eve   

JavaScript高阶函数的使用

JS中的for循环

/* 普通的for循环 */
for (let i = 0; i 

/* let i in this.books i是索引 */
for (let i in this.books) {
    total += this.books[i].count * this.books[i].price;
}

/* let item of this.books item是数组的元素 */
for (let item of this.books) {
    total += item.price * item.count;
}

JS中与数组有关的高阶函数

改进for循环计算总价格

/* reduce() */
return this.books.reduce(function (preValue,currValue) {
    return preValue + currValue.count * currValue.price;
}, 0).toFixed(2);

v-model表单输入绑定

Vue中使用v-model指令实现表单元素和数据的双向绑定。

v-model的基本使用

    
      
      message is : {{message}}
    
  
  

v-model的原理

    
      
      
      
      message is : {{message}}
    
  
  

你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。

v-model和radio的结合---单选框

    
    
      男
    
    
      女
    
    
你选择了{{gender}}
  
  

v-model和checkbox的结合---多选框

• 单个复选框：boolean
• 多个复选框：数组类型

  
    I accept.
  
  
您选择了同意协议
  您没有同意协议
  
下一步

  
  篮球
  足球
  音乐
  电影
  
您的爱好是:{{hobbies}}

v-model结合select标签

• 单选：一个值（省市区）
• 多选：爱好

  请选择
A
B
C你选择了{{selected}}

  请选择
A
B
C你选择了{{selected}}

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

  
  用户名：
  message is {{message}}
  
年龄：
  {{typeof age}}
  
密码：
  {{password}}

02、JS高阶函数、v-model表单的双向绑定

标签：input   htm   hang   ==   回调   i++   const   check   eve   

原文地址：https://www.cnblogs.com/shawnyue-08/p/12755169.html