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

Posted torey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了1.4 Vue v-if,v-show与v-for指令相关的知识,希望对你有一定的参考价值。

v-if,v-show与v-for

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-if,v-show与v-for指令</title>
    <!--1 引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记,视频地址: https://www.imooc.com/learn/980-->
        <!--1 v-if 当表达式为false,则删除,为true,则创建-->
        <div v-if="show">hello world</div>
        <button @click="handleClick">toggle</button>
        <!--2 v-show 当表达式为false,则隐藏,为true,则显示-->
        <div v-show="show1">hello world</div>
        <button @click="handleClick1">toggle</button>
        <ul>
            <!--3 v-for 循环集合-->
            <li v-for="item of list" :key="item">{{item}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                show: true,
                show1: true,
                list:[1,2,3]
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show;
                },
                handleClick1: function () {
                    this.show1 = !this.show1;
                }
            }
        });
    </script>
</body>
</html>

 

以上是关于1.4 Vue v-if,v-show与v-for指令的主要内容,如果未能解决你的问题,请参考以下文章

v-show v-if v-for

Vue学习之vue中的v-if,v-show,v-for

012.v-show与v-if与v-for

vue中v-if与v-show的区别以及使用场景

vue基础知识简述(v-if&v-for&v-show&v-model)

vue学习笔记(v-if v-else v-show v-for)-panda