初学Vue之数量加减

Posted 努力┗(`O′)┛奋斗!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初学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 现在是必须的。

以上是关于初学Vue之数量加减的主要内容,如果未能解决你的问题,请参考以下文章

Vue购物车案例(全选,反选,加入,删除,加减,总价,数量)

vue入门------简单购物车功能实现(全选,数量加减,价格加减)

小程序开发 - 购买数量之加减限制

vue购物车里面的加减按钮滚动后才生效是怎么回事

微信小程序之购物数量加减 —— 微信小程序实战商城系列

vscode之快速生成vue模板