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 var变量隐式声明方法
Oct 19 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
JavaScript实现弹出窗口效果
Dec 09 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新手上路(十)
2006/10/09 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php class类的用法详细总结
2013/10/17 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
python判断字符串是否纯数字的方法
2014/11/19 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
大学生职业生涯规划范文
2014/01/08 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
个人工作表现自我评价
2015/03/06 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书