zoukankan      html  css  js  c++  java
  • v-if&v-show异同点|v-for循环指令

    同:控制元素的隐藏和展示

    异:

    • v-if每次都会重新删除或者添上这个元素,
    • 而v-show只是添加或者移除 display:none这个属性
    • v-if有较高的切换性能消耗,v-show有较高的初始渲染消耗

    v-for指令:类似于for循环

    用法:

    html:

     <div id="app">
            <ul>
                <li v-for="(item, i) in varr">索引值:{{ i }}---每一项:{{ item }}</li>
                <!-- 遍历不同数组和对象数组两个方式 -->
                <li v-for="(item,i) in varr1">id:{{ item.id }}---name:{{ item.name }}</li>
                <!-- v-for 可以直接遍历对象!!! -->
                <li v-for="(val, key, i) in obj">val:{{ val }}---key:{{ key }}--index:{{ i }}</li>
                <!--
                还可以直接放数字【v-for="count in 10" 这是 {{count }} 次循环,下标从1开始,不是0!!!】
            -->
                <!--注意:vue高版本使用v-for的使用,必须配合key属性一起使用,意义在为每个item标示为唯一
                ex:<li v-for="(item, i) in varr" :key="item.id/i【key属性只支持number或者string两组类型,当数组时,可以用索引当做可以,对象时,可以用obj.id当做key!!!】">索引值:{{ i }}---每一项:{{ item }}</li> 
                -->
            </ul>
        </div>
    View Code

    js:

     let vm = new Vue({
            el: '#app',
            data: {
                vmsg: 'nihao',
                varr: [1, 2, 3, 4, 5, 6],
                varr1: [
                    { id: 1, name: 'zs1' },
                    { id: 2, name: 'zs2' },
                    { id: 3, name: 'zs3' },
                ],
                obj: {
                    name: 'zx',
                    gender: '男',
                    age: 18
                }
    
    
            }
        })
    View Code
  • 相关阅读:
    poj3107 Godfather
    poj1655 Balancing Act
    bzoj2073 PRZ
    bzoj1688 疾病管理
    BZOJ——1607: [Usaco2008 Dec]Patting Heads 轻拍牛头
    BZOJ——1606: [Usaco2008 Dec]Hay For Sale 购买干草
    BZOJ——1649: [Usaco2006 Dec]Cow Roller Coaster
    BZOJ——2096: [Poi2010]Pilots
    洛谷—— P1785 漂亮的绝杀
    NOIP 2012 提高组 DAY1 T2 国王游戏
  • 原文地址:https://www.cnblogs.com/Hijacku/p/14729067.html
Copyright © 2011-2022 走看看