VUE课程---19、条件渲染v-if

一、总结

一句话总结：

v-if指令用来做条件渲染，也就是满足条件就渲染元素，否则不渲染，后面可以接v-else-if、v-else等指令

<div id="app">
<!--    <p v-if="flag">{{msg}}</p>-->

    <!--
    如果用戶登录了，就显示播放视频
    如果用户没登录，我们就提示用户登录
    -->
<!--    <p v-if="isLogin">播放视频</p>-->
<!--    <p v-else>提示用户登录</p>-->

    <!--
    1 普通会员
    2 超级会员
    3 超级无敌无敌大会员
    其他值都是普通用户
    -->
    <p v-if="vip==1">普通会员</p>
    <p v-else-if="vip==2">超级会员</p>
    <p v-else-if="vip==3">超级无敌无敌大会员</p>
    <p v-else>普通用户</p>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app', //element
        data:{
            msg:'欢迎来到vue的世界',
            flag:false,
            isLogin:true,
            vip:0
        }
    });
    console.log(vm);
</script>

二、条件渲染v-if

博客对应课程的视频位置：19、条件渲染v-if
https://www.fanrenyi.com/video/26/236

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>条件渲染v-if</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 v-if指令用来做条件渲染，也就是满足条件就渲染元素，
11 否则不渲染，后面可以接v-else-if、v-else等指令
12 
13 -->
14 <div id="app">
15 <!--    <p v-if="flag">{{msg}}</p>-->
16 
17     <!--
18     如果用戶登录了，就显示播放视频
19     如果用户没登录，我们就提示用户登录
20     -->
21 <!--    <p v-if="isLogin">播放视频</p>-->
22 <!--    <p v-else>提示用户登录</p>-->
23 
24     <!--
25     1 普通会员
26     2 超级会员
27     3 超级无敌无敌大会员
28     其他值都是普通用户
29     -->
30     <p v-if="vip==1">普通会员</p>
31     <p v-else-if="vip==2">超级会员</p>
32     <p v-else-if="vip==3">超级无敌无敌大会员</p>
33     <p v-else>普通用户</p>
34 </div>
35 <script src="../js/vue.js"></script>
36 <script>
37     let vm=new Vue({
38         el:'#app', //element
39         data:{
40             msg:'欢迎来到vue的世界',
41             flag:false,
42             isLogin:true,
43             vip:0
44         }
45     });
46     console.log(vm);
47 </script>
48 </body>
49 </html>

来源：oschina

链接：https://my.oschina.net/u/4342102/blog/4281729

标签

Vue.js

javascript

element