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程序设计有所帮助。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Linux_Shell 脚本编程学习笔记五、Oracle JDK1.8 安装shell 脚本】
- vue中子组件使用$emit传值的种种情况
- 前端工程化建设
- 机器学习101-从JAX的角度去实现
- Spring 系列之jdbcTemplate的使用
- 【Linux_Shell 脚本编程学习知识点、判断传入参数是否是 整数】
- 发现一款.NET Core开源爬虫神器:DotnetSpider
- 完整的卸载Jdk java环境教程
- HTML 元素标签语义化及使用场景
- 共享内存原理与VCS监控采集实战
- Spark中的聚类算法
- 【Linux_Shell 脚本编程学习笔记六、shell的数值运算】
- Java自动化测试(adb常用命令 32)
- 前端学习计算机理论知识的好处
- 【Vue 学习笔记 一、Vue开发环境搭建】