vue学习中遇到的onchange、push、splice、forEach方法使用

最近在做vue的练习，发现有些js中的基础知识掌握的不牢，记录一下：

1、onchange事件：是在域的内容改变时发生，单选框与复选框改变后触发的事件。

2、push方法：向数组的末尾添加一个或多个元素，并返回新的长度 array.push(item1,item2,...,itemx)

3、splice方法：用于插入、删除或替换数组元素 array.splice(index,howmany,item1,...itemx)

4、forEach()方法：用于调用数组的每一个元素，并将元素传递给回调函数。array.forEach(function(currentValue,index,arr),thisValue)

                                                          

例子：计算未采购的数量

<input type="text" class="form-control" v-model="text">

<button class="btn btn-default" type="button" @click="addClick(text)">添加</button>

<small>未采购数<button type="button">{{num}}</button></small>

          <tr v-for="(item,index) in listArr">

      <td>{{item.sName}}</td>
      <td><input type="checkbox" v-model="item.flag" @change="action"></td>
      <td>{{item.flag}}</td>
      <td><button type="button" class="btn btn-default" @click='del(i)'>删除</button></td>
</tr>

　

js部分：
new Vue({
      el:'myList',
      data:{
            num:0,
            listArr:[{sName:'衣服',flag:false},{sName:'鞋子',flag:false},{sName:'裙子',flag:false}]
        },
      methods:{
             addClick:function(text){
                 if(text==''） return;//输入为空就返回
                 this.listArr.push({sName:text,flag:true})//添加
                 this.text=''//添加后输入框清空
                 this.action()
               },
             action:function(){
                     var _this=this;
                     _this.num=0;
                     this.listArr.forEach(function(item,index)){ 
                          if(!item.flag){ _this.num++ } 
                     })
               },
              del:function(i){
                this.listArr.splice(i,1)
              }
      }

})