1. 控制元素是否显示会用到v-if,当if中的值为true时,元素会显示到界面上

1.1 代码

<h1 v-if="true">1Vue学习</h1>

1.2 界面显示效果

2.当v-if的值为false时,元素会从界面上消失

2.1 代码

<h1 v-if="false">1Vue学习</h1>

2.2 界面显示效果

3.除了单条件的v-if之外,还有双条件v-if和v-else

3.1 代码

<h1 v-if="false">1Vue学习</h1>
<h2 v-else>2Web前端开发</h2>

3.2 界面显示效果

通过上面的例子我们可以知道,如果if的值为假的时候(元素隐藏),那么else的值必定为真(元素显示)

4.Vue在2.x之后有了新的特性,那就是多重条件v-if、v-else-if、v-else,通过今天是星期几的小例子,可以快速掌握多重条件。

4.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <div v-if="day==1">今天是周1</div>
        <div v-else-if="day==2">今天是周2</div>
        <div v-else-if="day==3">今天是周3</div>
        <div v-else-if="day==4">今天是周4</div>
        <div v-else-if="day==5">今天是周5</div>
        <div v-else-if="day==6">今天是周6</div>
        <div v-else-if="day==7">今天是周日</div>
        <div v-else>格式错误</div>
    </div>
  
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                day: 3
            }
        })
    </script>
</body>
</html>

4.2 当day为3的时候,界面显示效果


注意:使用多重条件时,应避免在条件中出现其他标签,如下所示

<div v-if="day==1">今天是周1</div>
<div v-else-if="day==2">今天是周2</div>
<div v-else-if="day==3">今天是周3</div>
<br />
<div v-else-if="day==4">今天是周4</div>
<div v-else-if="day==5">今天是周5</div>
<div v-else-if="day==6">今天是周6</div>
<div v-else-if="day==7">今天是周日</div>
<div v-else>格式错误</div>

这样使用会出现非常严重的错误

最后修改:2021 年 02 月 17 日
如果觉得我的文章对你有用,请随意赞赏