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 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
js轮播图代码分享
Jul 14 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
详解Python3中的Sequence type的使用
2015/08/01 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Python切片操作深入详解
2018/07/27 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
什么是Python包的循环导入
2020/09/08 Python
python 递归相关知识总结
2021/03/03 Python
金士达面试非笔试
2012/03/14 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
校友回访母校寄语
2015/02/26 职场文书