本文给出了一个例子来描述Vue的定量加减运算。分享给大家参考，如下：

渲染：

HTML:

div class=' count 3 ' 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:{ { total } }

var test=new Vue({ El : ' . count 3 '，data:{ total:0，liList:[{ id:0，num:0 }，{ id:1，num:0 }，{ id:2，num:0 }] }，methods 3: { cuts : function(idx){ if(this . LiLIst[idx]。num-；this . total-；}，add : function(idx){ this . LiLIST[idx]。数量；total；}}})摘要：

在VUE版本2中。x，v-for的第二个参数是index，使用时不带$符号。

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

vue版本2.x中的El不能使用body

Vue2.x:数组语法：

使用或传递参数时：{{index}} @click='add(index)'函数在接收时可以直接使用index

对象语法：

对象中的值或对象中的(值、键、索引)值是值，键是键值，索引是索引值，后两者是可选的

Vue1.x:数组语法：

使用或传递参数时：{{$index}} @click='add($index '函数在接收时可以直接使用$index。

对象语法：

对象中的值或对象中的(键、值)值是值，键是键值

在vue2.x中，键只支持数字和字符串等基本类型，但不支持对象。

@click是on:的缩写。

:key是v-bind: key的缩写。官方对于添加key的解释是，如果改变数据项的顺序，Vue不会移动DOM元素来匹配数据项的顺序，而只是在这里重用每个元素，并确保它显示在特定索引下已经呈现的每个元素。

我自己的理解：感觉有点像小程序里的WX: key=“”。添加密钥后，表示唯一。当数据项的顺序发生变化时，如删除和添加，可以跟踪每个节点，这样就可以重用和重新排序现有的元素，而不会出现呈现错误。

在vue版本Vue2.2.0中，当在组件中使用v-for时，密钥现在是必需的。

感兴趣的朋友可以使用以下工具测试上述代码的运行效果：

在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun

希望本文对vue.js程序的设计有所帮助。