Vue条件判断指令：v-if、v-else、v-else-if、v-show 指令

news2024/12/23 3:19:20

在程序设计中，条件判断是必不可少的技术。在视图中，经常需要通过条件判断来控制 DOM 的显示状态。Vue.js 提供了相应的指令用于实现条件判断，包括：v-if、v-else、v-else-if、v-show 指令。

1、v-if 指令

v-if 指令可以根据表达式的值来判断是否输出 DOM 元素及其包含的子元素。如果表达式的值为 true，就输出 DOM 元素及其包含的子元素；否则，就将 DOM 元素及其包含的子元素移除。

【实例】使用 v-if 指令，判断是否显示 DOM 元素。

<body>
    <div id="app">
        <h3>{{title}}</h3>
        <p>Tom 的年龄是{{age}}</p>
        <p v-if="age < 18">Tom 未成年</p>

        <template v-if="show">
            <p>博客信息：{{blogName}}</p>
            <p>博客地址：{{blogUrl}}</p>
        </template>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                title: "使用 v-if 指令",
                age: 16,
                show: true,
                blogName: "您好，欢迎访问 pan_junbiao的博客",
                blogUrl: "https://blog.csdn.net/pan_junbiao"
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

执行结果：

2、v-else 和 v-else-if 指令

v-else 指令的作用相当于 JavaScript 中的 else 语句部分的作用。可以将 v-else 指令配合 v-if 指令一起使用。

v-else-if 指令的作用相当于 JavaScript 中的 else if 语句部分的作用。应用该指令可以进行更多的条件判断，不同的条件对应不同的输出结果。

【实例】使用 v-if、v-else、v-else-if 指令，判断当前月份属于哪个季节。

<body>
    <div id="app">
        <h3>{{title}}</h3>
        <p>当前月份是 {{month}} 月</p>

        <div v-if="month >= 1 && month <= 3">
            当前月份属于：春季
        </div>
        <div v-else-if="month >= 4 && month <= 6">
            当前月份属于：夏季
        </div>
        <div v-else-if="month >= 7 && month <= 9">
            当前月份属于：秋季
        </div>
        <div v-else>
            当前月份属于：冬季
        </div>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                title: "使用 v-if、v-else、v-else-if 指令",
                month: new Date().getMonth() + 1
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

执行结果：

3、v-show 指令

v-show 指令是根据表达式的值来判断是显示还是隐藏 DOM 元素。当表达式的值为 true 时，元素将被显示；当表达式的值为 false 时，元素将被隐藏，此时为元素添加了一个内联样式：style="display: none"。与 v-if 指令不同，对于使用 v-if 指令的元素，无论表达式的值为 true 还是 false，该元素始终会被渲染并保留在 DOM 中。绑定值的改变只是简单地切换元素的 CSS 属性 display。

注意：

v-show 指令不支持<template>元素，也不支持 v-else 指令。

【实例】使用 v-show 指令，切换内容的显示和隐藏。

<body>
    <div id="app">
        <input type="button" :value="bText" v-on:click="toggle" />
        <div v-show="isShow">
            <p>博客信息：{{blogName}}</p>
            <p>博客地址：{{blogUrl}}</p>
        </div>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    // 使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                isShow: true,
                bText: "隐藏内容",
                blogName: "您好，欢迎访问 pan_junbiao的博客",
                blogUrl: "https://blog.csdn.net/pan_junbiao"
            }
        },
        //方法
        methods : {
            toggle : function(){
                //切换按钮文字
				this.bText == '隐藏内容' ? this.bText = '显示内容' : this.bText = '隐藏内容';
				this.isShow = !this.isShow;//修改属性值
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

执行结果：