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)

例子：计算未采购的数量

      <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)

              }

      }

})

巴特西

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

最新文章

热门文章