Vue 条件渲染

最新推荐文章于 2022-08-25 11:31:07 发布

书和咖啡

最新推荐文章于 2022-08-25 11:31:07 发布

阅读量276

点赞数

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/ivenqin/article/details/110494141

版权

Vue 专栏收录该内容

24 篇文章 4 订阅

订阅专栏

v-if 指令的使用

在Vue中，v-if 指令可以用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

示例：

我们来看下面这段代码，有姓名和年龄这两条信息，现要求只显示姓名，而隐藏年龄：

<body>
    <div id="app">
        <p v-if="show">显示姓名：小飞侠</p>
        <p v-if="hide">隐藏年龄：28</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data() {
                return{
                    show:true,
                    hide:false
                }
            }
        })
    </script>
</body>

在浏览器中预览：

我们可以清楚的看到在浏览器中关于年龄的信息被成功隐藏，这是因为我们分别在两条信息上使用 v-if 指令绑定了两个属性，属性 show 的值为 true，属性 hide 的值为 false 。内容只有当 v-if 指令的表达式返回真值的时候才会被渲染，所以第二条信息被成功隐藏。

v-else指令

v-if 指令就类似 JavaScript 中的 if 语句，而 if 语句有与之匹配的else语句，v-if 指令也有与之匹配的 v-else 指令。

示例：

例如下面这段代码中：

<div id="app">
	<p v-if="3>1">显示</p>
	<p v-else>隐藏</p>
</div>

v-if 指令的表达式值为真，所以内容会被渲染，而与之对应的 v-else 指令中的内容则不会被渲染。反之如果v-if指令表达式值为假，则会渲染v-else指令中的内容。

注意 v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if指令

v-else-if 指令是在2.1.0 新增的一个指令，相当于 JavaScript 中的 else-if 语句，可以同时使用多个 v-else-if指令。

<body>
    <div id="app">
        <p v-if="name=='Mark'">我是Mark</p>
        <p v-else-if="name=='Tom'">我是Tom</p>
        <p v-else-if="name=='xkd'">我是xkd</p>
        <p v-else>猜猜我是谁？</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data() {
                return{
                    name:'xkd'
                }
            }
        })
    </script>
</body>

在浏览器中预览，可以看到页面中会显示 “我是xkd”，因为我们在 data 函数中，给 name 属性赋值为 ’xkd‘，所以只有满足此条件的语句才会显示相应内容。

需要注意的是，v-else-if 指令必须在 v-if 指令之后，v-else 指令之前。

v-show指令

还有一个指令也可以根据条件展示元素的选项，也就是 v-show 指令。

示例：

<body>
    <div id="app">
        <h1 v-show="show">侠课岛欢迎你！</h1>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data() {
                return{
                    show:true
                }
            }
        })
    </script>
</body>

上述代码在浏览器页面中会显示“侠课岛欢迎你！”，使用 v-show 指令，不管 data 函数中的show 属性值为 true 或者 false，都会渲染 <h1> 标签中的内容，区别在于当值为 false 时，标签中 display 属性值为 none，即隐藏。

虽然 v-if 指令和 v-show 指令都是通过条件来渲染元素内容，但是它们还是有区别的。

v-if 是惰性的，如果 v-if 的表达式结果不是true的话，对应的元素是不会被渲染出来的，一直到表达式的结果第一次为 true 的时候，才会去渲染。
v-show 不管表达式的结果如何，都会渲染出来，表达式的结果只是用来判断是否通过css来切换元素的隐藏和显示。
一般来说v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因为如果在运行时条件不太可能改变则使用 v-if 较好。如果需要非常频繁地切换，则使用 v-show 较好。
V

书和咖啡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue 条件渲染

v-if 指令的使用在Vue中，v-if 指令可以用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。示例：我们来看下面这段代码，有姓名和年龄这两条信息，现要求只显示姓名，而隐藏年龄：<body> <div id="app"> <p v-if="show">显示姓名：小飞侠</p> <p v-if="hide">隐藏年龄：28</p> </
复制链接

扫一扫