Vue

Vue的条件渲染

2021年7月1日 /

一 什么是条件渲染

其实就是if-else判断，只不过语法稍有区别。另外，Vue的条件判断是v-if=“xxx”，后面的双引号中的xxx本身的值是true或false时作为判断条件的。

二 示例代码

1 简单的条件渲染
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>if-else学习</title>
        <script  src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 v-if="awesome">Vue is awesome</h1>
            <h1 v-else>Oh no....</h1>
        </div>
     <script type="text/javascript">     
         let app=new Vue({
            el:"#app",
            data:{
                awesome:true,
            }
        })
     </script>
    </body>
</html>

解释说明：

div id=”app”，相当于是定义view层；

当v-if=”awesome”，其中的双引号中的awesome的值为true时，在页面上显示一个html的h1标签；否则的话，就显示另外一个h1标签。

let app=new Vue，定义ViewModel层；这里的app其实是JavaScript的一个变量名，可以命名为其它名称也可以。但是，下面的el:”#app”，这里的app就必须要好前面div id=“app”中定义的变量名称相吻合。

同时，el:”#app”，表示的是挂载元素；

下面的data:是固定写法，表示的是定义model层。关键字data不可以写成其它名称，必须写成data。

2 多条件的条件渲染
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>多条件判断</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="type === 'A'">
              A
            </div>
            <div v-else-if="type === 'B'">
              B
            </div>
            <div v-else-if="type === 'C'">
              C
            </div>
            <div v-else>
              Not A/B/C
            </div>
        </div>

        <script>
         let app=new Vue({
             el:"#app",
             data:{
                 type:"ZZZ" 
             }          
         })
        </script>

    </body>
</html>

解释说明：

v-if=”type === ‘A'”表示的是，双引号中的type = ==’A’这个条件表达式的计算结果当作判断条件，看其是否为true？这里的判断是两层意思，type的值要等于‘A’，同时要求type的数据类型也要和’A’相等。

三 小结

参考官方文档地址：https://cn.vuejs.org/v2/guide/conditional.html

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

当然，v-if可以脱离v-else使用单独使用。

Post Views: 828

留言