Vue v-if v-show与v-for指令

<html>
    <head>
        <title>Vue</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript" src="./vue.js"></script>
    </head>
    <body>
        <p id="root">
            <p v-if="is_show">this is p</p>
            <!-- v-if和v-show的区别在于:

            v-if隐藏元素时,会把元素从dom树删掉,而v-show会给元素加一个样式display:none。如果显示隐藏频率高,则行行选择用v-show效率会高,如果频率很低,则可以用v-if。
             -->
            <p style="width:100px;height:100px;background:red;" v-show="is_show">Red</p>
            <button @click="handleClick">toggle</button>
            <!-- 循环方式 1  -->
            <ul>
                <li v-for="item of list_arr">{{ item }}</li>
            </ul>
            <!-- 循环方式 2 
            使用v-for时,给第一项增加一个:key属性,可以提升性能
            为了提升效率 可以在v-for后面加上key值 如下:
            key的值 不能相同(不包含字符串)解决如下:
            -->
            <ul>
                 <li v-for="(item,index) of list_arr" :key='index'>{{ item }}</li>
            </ul>
        </p>
        <script>
            new Vue({
                el:'#root',
                methods:{
                    handleClick: function(){
                        this.is_show = !this.is_show;
                    }
                },
                data:{
                    is_show:true,
                    list_arr:['one','two','three'],
                },
            })
        </script>
    </body>
</html>

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容