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