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

网络编程 2024/9/1 佚名

3 2 1

本文实例讲述了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.jb51.net/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具：
http://tools.jb51.net/code/WebCodeRun

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

Vue,加减运算

标签：

Vue,加减运算

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“Vue入门之数量加减运算操作示例”

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

暂无“Vue入门之数量加减运算操作示例”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

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

Vue,加减运算

vue 内置过滤器的使用总结(附加自定义过滤器)

简单的React SSR服务器渲染实现

评论“Vue入门之数量加减运算操作示例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接