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 动态调整图片尺寸实现代码
Dec 28 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
javascript函数特点实例分析
May 14 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
JS中常用的消息框总结
Feb 24 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
微信小程序block的使用教程
Apr 01 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
CI框架Session.php源码分析
2014/11/03 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
Django发送html邮件的方法
2015/05/26 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Python中的默认参数实例分析
2018/01/29 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
法律工作求职自荐信
2013/10/31 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
见习报告格式范文
2014/11/08 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
springcloud整合seata
2022/05/20 Java/Android
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang