怎么在Vue中实现数量加减运算

本篇文章给大家分享的是有关怎么在Vue中实现数量加减运算，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

HTML:

<div class="count3">   <ul>     <li v-for="(key,idx) in liList" :key="key.id">       {{key.id}},{{idx}}       <template>         <button class="cut" @click="cuts(idx)">-</button>           <span>{{key.num}}</span>           <button class="add" @click="add(idx)">+</button>       </template>     </li>   </ul>   总数：{{total}} </div>

JS:

var test=new Vue({   el:".count3",   data:{     total:0,     liList:[{       id:0,       num:0     },{       id:1,       num:0     },{       id:2,       num:0     }]   },   methods:{     cuts:function(idx){       if(this.liList[idx].num<1) return       this.liList[idx].num--;       this.total--;     },     add:function(idx){       this.liList[idx].num++;       this.total++;     }   } })

总结：

在vue2.x版本中，v-for的第二个参数是index即索引，并且后面使用时不用加$符号。

而vue1.x的index索引是在第一个参数，第二个参数才是对应值，而且后面使用时需要加$符号

vue2.x版本中 el 不能使用body

vue2.x:数组语法：

value in arr    或者   （value，index） in arr      使用或传参时：{{index}}      @click="add(index)"函数接收时就能直接使用index

对象语法：

value in object  或者  (value,key,index) in object   value是值，key是键值，index是索引值，后面两个都是可选

vue1.x:数组语法：

value in arr    或者   （index,value） in arr      使用或传参时：{{$index}}      @click="add($index)"函数接收时就能直接使用$index

对象语法：

value in object  或者  (key,value) in object   value是值，key是键值

vue2.x中的key只支持 number 和 string 类型等primitive（原始） 类型，不支持object。

@click是v-on:的简写方式。

：key是v-bind：key的简写方式。官方给出加入key的解释是：如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素

自己的理解：感觉和小程序中的wx：key=“”有点类似，加上key之后，表示独一无二，在数据项顺序改变的时候，比如删除增加，就能跟踪每个节点，从而重用和重新排序现有元素，不会出现渲染错误等情况。

在Vue2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

以上就是怎么在Vue中实现数量加减运算，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。