美文网首页
Vue.js 条件渲染指令（二）

Vue.js 条件渲染指令（二）

作者: Rinaloving | 来源:发表于2019-08-02 18:29 被阅读0次
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>条件渲染指令（二）</title>
</head>
<body>
    <!--v-show 的用法与 v-if基本一致， 只不过v-show是改变元素的CSS属性display。
    当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联
    样式 dispaly:none;-->
    <div id="app">
        <p v-show="status === 1 ">当status 为 1 时显示改行</p>
    </div>
    <!--自动识别最新稳定版本的Vue.js-->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                status:2
            }
        })
    </script>


</body>
</html>
渲染后的结果
 <!--渲染后的结果-->
 <p style="display: none;">当status 为 1 时显示改行</p>
v-show.png
v-show 不能在 <template> 上使用。

相关文章