表单绑定v-model

1、表单绑定v-model

（1）text

<input type='text' v-model='message' />

<input type='text' v-bind:value='message' :input = 'valueChange'/>
//第二种写法
<input type='text' v-bind:value='message' :input = 'message = $event.target.value'/>
data(){
return {
   meaasge:'你好呀'
}
}
methods:{
  valueChange(event){
  console.log('1111',event.target.value);
  this.message = event.target.value
  }
}

（2）radio

<label for='male'>
  <input type='radio' id='male' name='sex' value='男' v-model = 'sex'/>男
</label>
<label for='female'>
  <input type='radio' id='female' name='sex' value = '女' v-model ='sex' />女
</label>

data(){
 return {
 sex:''
 }
}

（3）checkbox

单选框：

<label for='agree'>
  <input type='checkbox' id='agree' v-model='isAgree'/>同意协议
</label>

data(){
return {
 isAgree:false
   }
}

多选框：

  <input type='checkbox' value = '篮球' v-model = 'hobbies' >篮球
  <input type='checkbox' value = '足球' v-model = 'hobbies'>足球
  <input type='checkbox' value = '乒乓球' v-model = 'hobbies'>乒乓球
  <input type='checkbox' value = '跑步' v-model = 'hobbies'>跑步


data(){
return {
 isAgree:false,
 hobbies:[]
   }
}

（4）select

单选：

<select name ='abc' v-model='fruit'>
    <option value = '苹果'>苹果</option>
    <option value = '西瓜'>西瓜</option> 
    <option value = '香蕉'>香蕉</option>
</select>

data(){
return {
 friut:'香蕉'
}
}

选择多个：

<select name ='abc' v-model='fruits' multiple>
    <option value = '苹果'>苹果</option>
    <option value = '西瓜'>西瓜</option> 
    <option value = '香蕉'>香蕉</option>
</select>

data(){
return {
 friuts:[]
  }
}

2、for…in

for(let i in this.books){
  console.log(i)//代表的是索引值
}

3、for…of

for(let item of this.books){
 coonsole.log(item)//直接拿到的是值
}

4、编程范式

（1）命令式编程/声明式编程

（2）面向对象编程（第一公民：对象）

函数式编程（第一公民：函数）

5、高阶函数的使用

（1）filter:回调函数有一个要求：必须返回一个boolean值

true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中

false:当返回false时，函数内部会过滤掉这次的N

let newNums = nums.filter(function(n){
  return n < 100
})
console.log(newNums)

（2）map函数的使用

let new2Nums = newNums.map(function(){
  return n*2;
})
console.log(new2Nums)

（3）reduce函数的使用

对数组中所有的内容进行汇总

let total = new2Nums.reduce(function(preValue,n){
  return preValue + n ;
},0)

6、v-model修饰符

（1）lazy在失去焦点或者回车的时候，在进行更新

（2）number

（3）trim