Vue入门之数量加减运算操作示例


Posted in Javascript onDecember 11, 2018

本文实例讲述了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.3water.com/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.3water.com/code/WebCodeRun

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

Javascript 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
测试你的JS的掌握程度的代码
Dec 09 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
简单的React SSR服务器渲染实现
Dec 11 #Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 #Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 #Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 #Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 #Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 #Javascript
You might like
PHP编码规范的深入探讨
2013/06/06 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
php-msf源码详解
2017/12/25 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
大雁塔英文导游词
2015/02/10 职场文书
放射科岗位职责
2015/02/14 职场文书
公司放假通知范文
2015/04/14 职场文书
写给老师的保证书
2015/05/09 职场文书
教师节主持词开场白
2015/05/29 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android