Vue 条件渲染(十一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38287952/article/details/88091621
第一:
    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>

 

展开阅读全文

没有更多推荐了,返回首页