vue-条件渲染

最新推荐文章于 2022-09-28 16:05:28 发布

@Tiramisu

最新推荐文章于 2022-09-28 16:05:28 发布

阅读量87

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105009681

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

(1)v-if：作用与v-show相同，本质是通过操纵dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，相反则移除。

(2)v-else v-else-if

(3)template v-if ,包装元素template 不会被创建

(4)v-show：根据真假切换元素的显示状态，指令后面的内容最终都会解析为布尔值，值为true元素显示，值为false元素隐藏，原理是修改元素的display，实现显示隐藏。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>

    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <button @click="handleClick()">click</button>
        <div v-if="isCreated">动态创建和删除--111111111111</div>
        <div v-else>动态创建和删除--2222222222</div>

        <ul v-if="datalist.length">
            <li v-for="data in datalist">
                {{data}}
            </li>
        </ul>

        <div v-else>
            购物车空空如也
        </div>

        <div v-if="which===1">
            111111
        </div>

        <div v-else-if="which===2">
            222222
        </div>

        <div v-else>
            333333
        </div>

        <template v-if="isCreated">

            <div>111111111111</div>
            <div>222222222222</div>
            <div>333333333333</div>
        </template>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#box",
            data: {
                isCreated: false,
                datalist: [],
                which: 1
            },
            methods: {
                handleClick() {
                    this.isCreated = !this.isCreated
                    this.datalist = ["1111", "2222", "3333"]
                }
            },
        })
    </script>
</body>
</html>