zoukankan      html  css  js  c++  java
  • 初学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 现在是必须的。

  • 相关阅读:
    Balanced Binary Tree
    Convert Sorted List to Binary Search Tree
    Convert Sorted Array to Binary Search Tree
    Binary Tree Zigzag Level Order Traversal
    Validate Binary Search Tree
    Binary Tree Level Order Traversal II
    Binary Tree Level Order Traversal
    Maximum Depth of Binary Tree
    如何把U盘的两个盘或者多个盘合成一个
    bugku 想蹭网先解开密码
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/8259093.html
Copyright © 2011-2022 走看看