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学习笔记记录我的旅程
May 23 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
微信小程序实现录音Record功能
May 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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
python 实现性别识别
2020/11/21 Python
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
建筑工地宣传标语
2014/06/18 职场文书
社会实践活动总结范文
2014/07/03 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript