Vue条件渲染

最新推荐文章于 2024-12-11 14:32:41 发布

原创最新推荐文章于 2024-12-11 14:32:41 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue2学习笔记专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了Vue.js中的条件渲染，包括v-if和v-show的用法、适用场景及其特点。v-if适合切换频率低的情况，不展示的DOM会直接移除；v-show适用于切换频繁的场景，元素不会被移除，仅通过样式隐藏。此外，还展示了v-else-if和v-else的使用，以及如何在实际案例中应用v-if和v-show。

条件渲染：

1.v-if

写法：

(1).v-if="表达式"

(2).v-else-if="表达式"

(3).v-else="表达式"

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

写法：v-show="表达式"

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="false">hello world</p>
    </div>

    <script>
        Vue.config.productionTip = false
        
        const vm = new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

使用v-if渲染<p>元素 if里面的值为 false 条件不成立所以元素不渲染在页面中

在v-if语句中值可以是表达式和原生if的用法相似

<div id="app">
        <p v-if="1 === 1">hello world</p>
    </div>

满足条件渲染元素

v-else-if 和 v-else

在条件判断中还有v-else-if 和 v-else 它们的用法与原生的if else大致相同

在if表达式中的条件不成立则继续判断else后面的条件满足条件之后执行渲染

<body>
    <div id="app">
        <!-- 根据fruits的值 判断水果的种类  -->
        <p v-if="fruits === 'apple'">苹果</p>
        <p v-else-if="fruits === 'banana'">香蕉</p>
        <p v-else>没有匹配的水果</p>
    </div>

    <script>
        Vue.config.productionTip = false
        
        const vm = new Vue({
            el: '#app',
            data: {
                fruits: 'banana'
            }
        })
    </script>
</body>

在else-if中找到了成立的表达式渲染在了页面中

v-show

v-sohw与v-if的用法基本相同他们的区别是 v-if条件不满足就不渲染元素而v-show是渲染了所有元素根条件来控制元素是否显示

接下来我们使用v-show来演示一下上面的案例

<body>
    <div id="app">
        <!-- 根据fruits的值 判断水果的种类  -->
        <p v-show="fruits === 'apple'">苹果</p>
        <p v-show="fruits === 'banana'">香蕉</p>
        <p v-else>没有匹配的水果</p>
    </div>

    <script>
        Vue.config.productionTip = false
        
        const vm = new Vue({
            el: '#app',
            data: {
                fruits: 'banana'
            }
        })
    </script>
</body>