本文实例讲述了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 现在是必须的。
感兴趣的朋友可以使用如下工具测试上述代码运行效果：
在线HTML/CSS/JavaScript代码运行工具： http://tools.jb51.net/code/HtmlJsRun
在线HTML/CSS/JavaScript前端代码调试运行工具： http://tools.jb51.net/code/WebCodeRun
希望本文所述对大家vue.js程序设计有所帮助。
Vue 加减运算