Vue从入门到实践（五）v-model理解和数组常用操作

Hunter

使用:value和@input代替v-model

v-model 本质上包含了两个操作：

v-bind 绑定input元素的value属性
v-on 指令绑定input元素的input事件

即：:value="txtVal" 和 @input="handleInput"

<div id="app">
 <!-- <input type="text" v-model="txtVal"> -->
 <input type="text" :value="txtVal" @input="handleInput">
 <p>{{ txtVal }}</p>
 </div>
 <script>
 var vm = new Vue({
 el:"#app",
 data:{
 txtVal:""
 methods:{
 handleInput(e){
 console.log(e)
 this.txtVal = e.target.value
 </script>

即：

<input type="text" v-model="textVal"/>
 <!-- 等同于 -->
 <input type="text" v-bind:value="textVal" v-on:input="textVal = $event.target.value"/>

数组常用的操作

1、常用方法使用

push pop unshift shift splice concat

var arr = [1, 2, 3]
 // 往数组最后一位添加一个数字
 arr.push(4) // [1, 2, 3, 4]
 // 删除数组最后一个数字
 arr.pop()   // [1, 2, 3]
 console.log(arr)
 // 往数组第一位添加一个数字
 arr.unshift(0)
 console.log(arr)
 // 删除数组第一个元素
 arr.shift()
 console.log(arr)
 // splice
 // 删除第一个元素
 arr.splice(1, 2) 
 console.log(arr)
 arr.splice(1, 2, 2, 4, 5) 
 console.log(arr)
 // 合并数组
 console.log([1, 6].concat([5, 7]))

push（返回数组长度）、unshift（返回数组长度）、shift（返回删除的值）、pop（返回删除的值）、splice、concat（返回新数组）

2、reduce、filter、map

var arr = [1, 2, 3]
 // 计算总数
 var ret1 = arr.reduce((pre, current)=>{
 pre += current
 return pre
     }, 0)
 console.log(ret1)  // 6
 // filter (过滤)
 var ret2 = arr.filter(item =>{
 return item > 2
 console.log(ret2)  // [3]
 // map 
 var ret3 = arr.map(item =>{
 return {id:item}
 console.log(ret3)   // [{id: 1}, {id: 2}, {id: 3}]

3、数组去重

var arr2 = [1, 2, 3, 1, 6, 2, 3]
 //ES6
 consoloe.log([...new Set(arr2)])
 console.log(Array.from(new Set(arr2)))
 var newArray = [];
 for(var i=0; i<arr2.length; i++){
 if(newArray.indexOf(arr2[i])==-1){
 newArray.push(arr2[i])
 console.log(newArray)
 var newArray2 = [];
 var obj = {};
 for(var i=0; i<arr2.length; i++){
 if(!obj[arr2[i]]){ //如果不在obj中，就表示不重复的数据，就在对象中添加键值对