Vue 条件渲染（十一）

最新推荐文章于 2023-02-18 22:18:33 发布

Yee Jason

最新推荐文章于 2023-02-18 22:18:33 发布

阅读量83

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_38287952/article/details/88091621

版权

vue 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

第一：
    v-if
    v-if v-else
    v-if v-else-if v-else
    <div v-if="show">{{message}}</div>
第二：v-show="show" （display:none/display:block）
    <div v-show="show">{{message}}</div>
第三: key
当你给页面某个元素加上key值得时候，当key值和别的元素值的时候，就不会复用了。
v-if 和 v-show 的区别当条件都是假的时候 v-if 为假的dom元素不会显示在dom之中，

而 v-show会显示，但是不会显示在页面之中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的条件渲染</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">

        <div v-if="show">
            用户名：<input key="username"/>
        </div>
        <div v-else>
            邮箱名：<input ke="email" />
        </div>

       <!--
        <div v-if="show === 'a'">This is a</div>
        <div v-else-if="show === 'b'">
            This is B
        </div>
        <div v-else>This is others</div>
        -->

      <!--
         <div v-if="show">
            {{message}}
        </div>
        <div v-else>
            this
        </div>
        -->

        <!--
        <div v-if="show">{{message}}</div>
        <div v-show="show">{{message}}</div>
        -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                show: 'a',
                message: "hello World"
            }
        });
    </script>
</body>
</html>

Yee Jason

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 条件渲染（十一）

第一： v-if v-if v-else v-if v-else-if v-else &lt;div v-if="show"&gt;{{message}}&lt;/div&gt;第二：v-show="show" （display:none/display:block） &lt;div v-show="show"&gt;{{message}}&lt;/d
复制链接

扫一扫