Vue3——条件判断指令

条件判断指令

1、v-if指令

1.1、基本用法

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

例如，输出用户的年龄，并判断该年龄是否小于18，如果是则输出用户未成年。代码如下：

html 复制代码

<div id="app">
    <p>Tom的年龄是{{age}}</p>
    <p v-if="age < 18">Tom未成年</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                age: 16
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

1.2、判断一组元素

v-if是一个指令，必须将它添加到一个元素上，根据表达式的结果判断是否输出该元素。如果要对一组元素进行判断，则需要使用<template>元素作为包装元素，并在该元素上使用v-if，最后的渲染结果里不会包含<template>元素。

例如，根据表达式的结果判断是否输出一组单选按钮。代码如下：

js 复制代码

<div id="app">
    <template v-if="show">
        <input type="radio" value="手机">手机
        <input type="radio" value="电脑">电脑
        <input type="radio" value="家电">家电
        <input type="radio" value="家具">家具
    </template>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                show: true
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

2、v-else指令

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

例如，输出用户的年龄，并判断该年龄是否小于18，如果是则输出用户未成年，否则输出用户已成年。代码如下：

html 复制代码

<div id="app">
    <p>Tom的年龄是{{age}}</p>
    <p v-if="age < 18">Tom未成年</p>
    <p v-else>Tom已成年</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                age: 20
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

示例：判断2023年2月份的天数。

应用v-if指令和v-else指令判断2023年2月份的天数，代码如下：

html 复制代码

<div id="app">
    <p v-if="(year % 4 == 0 && year % 100 != 0) || year % 400 == 0">
        {{show(29)}}
    </p>
    <p v-else>
        {{show(28)}}
    </p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                year: 2023
            }
        },
        methods: {
            show: function(days) {
                alert(this.year + '年2月份有' + days + '天');
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

3、v-else-if指令

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

例如，输出数据对象中的属性m和n的值，比较两个属性的值，输出比较的结果。代码如下：

js 复制代码

<div id="app">
    <p>m的值是{{m}}</p>
    <p>n的值是{{n}}</p>
    <p v-if="m < n">m小于n</p>
    <p v-else-if="m === n">m等于n</p>
    <p v-else>m大于n</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                m: 16,
                n: 16
            }
        },
    }).mount('#app');//装载应用实例的根组件
</script>

示例：判断当前的季节。

获取当前的月份，并判断当前月份属于哪个季节。代码如下：

js 复制代码

<div id="app">
    <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>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                month: new Date().getMonth() + 1
            }
        },
    }).mount('#app');//装载应用实例的根组件
</script>

v-else指令必须紧跟在v-if指令或v-else-if指令的后面，否则v-else指令将不起作用。同样，v-else-if指令也必须紧跟在v-if指令或v-else-if指令的后面。

4、v-show指令

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

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

示例：切换图片的显示和隐藏。

定义一个按钮，通过单击该按钮切换图片的显示和隐藏。代码如下：

html 复制代码

<div id="app">
    <input type="button" :value="bText" v-on:click="toggle">
    <div v-show="show">
        <img src="images/75.jpg">
    </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                bText: '隐藏图片',
                show: true
            }
        },
        methods: {
            toggle: function() {
                this.bText == '隐藏图片' ? this.bText = '显示图片' : this.bText = '隐藏图片';
                this.show = !this.show;
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

5、如何选择v-if和v-show

v-if和v-show实现的功能类似，但是两者也有着本质的区别。下面列出v-if和v-show这两个指令的主要不同点。

在进行v-if切换时，因为v-if中的模板可能包括数据绑定或子组件，所以Vue.js会有一个局部编译／卸载的过程。而在进行v-show切换时，仅发生了样式的变化。因此从切换的角度考虑，v-show消耗的性能要比v-if小。
v-if是惰性的，在初始条件为false时，v-if本身什么都不会做，而使用v-show时，不管初始条件是真是假，DOM元素总是会被渲染。因此从初始渲染的角度考虑，v-if消耗的性能要比v-show小。

总体来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。