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程序设计有所帮助。
您可能感兴趣的文章:
- C语言数组和指针的理解_在取地址运算上的操作_指针加减操作_a 和&a 的区别
- 机器学习入门(四):关于卷积运算量和参数数量的计算
- vue.js的基本操作,入门足以
- angularjs 增,删,改,查,一套 数量加减操作
- 零配置打包工具Parcel 快速入门 -- vue示例
- jQuery购物数量数字加减运算效果
- vue商品数量加减
- Python双精度浮点数运算并分行显示操作示例
- Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】[原创]_python_脚本之家
- Vue.js双向绑定操作技巧(初级入门)
- Java中精确的浮点运算操作示例
- Vue.js快速入门示例
- Metro Style App开发快速入门 之文件访问操作示例
- Python入门教程3. 列表基本操作【定义、运算、常用函数】[原创]_python_脚本之家
- AngularJS入门教程之Cookies读写操作示例
- 初学Vue之数量加减
- Oracle中日期时间的操作比较和加减-入门基础(转)
- Vue.js快速入门示例
- Vue.js快速入门及示例
- 四则运算问题扩充:1、题目避免重复;2、可定制(数量/打印方式);3、可以控制下列参数: 是否有乘除法、是否有括号、 数值范围、加减有无负数、除法有无余数、否支持分数 (真分数, 假分数, …)、是否支持小数 (精确到多少位)、打印中每行的间隔可调整;