怎么在Vue中实现数量加减运算
本篇文章给大家分享的是有关怎么在Vue中实现数量加减运算,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
成都创新互联公司主营梅河口网站建设的网络公司,主营网站建设方案,成都App制作,梅河口h5小程序定制开发搭建,梅河口网站营销推广欢迎梅河口等地区企业咨询
HTML:
总数:{{total}}
- {{key.id}},{{idx}} {{key.num}}
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中实现数量加减运算,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
分享文章:怎么在Vue中实现数量加减运算
标题URL:http://hbruida.cn/article/ggceeg.html