微信扫一扫打赏支持

VUE课程参考---15、条件渲染v-if

VUE课程参考---15、条件渲染v-if

一、总结

一句话总结：

v-if指令用来做条件渲染，也就是满足条件就渲染元素，否则不渲染，后面可以接v-else-if、v-else等指令
<div id="app">
    <!--v-if条件渲染-->
<!--    <p v-if="isLogin">已登录</p>-->

    <!--v-if和v-else-->
<!--    <p v-if="isLogin">已登录，显示视频</p>-->
<!--    <p v-else>未登录，不显示视频</p>-->

    <!--v-if、v-else-if和v-else-->
    <p v-if="vipType==1">普通会员</p>
    <p v-else-if="vipType==2">超级会员</p>
    <p v-else-if="vipType==3">超级超级大会员</p>
    <p v-else>不是会员</p>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isLogin: true,
            vipType:2
        }
    });
</script>

 

 

 

二、条件渲染v-if

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>1、条件渲染v-if</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 v-if指令用来做条件渲染，也就是满足条件就渲染元素，否则不渲染，后面可以接v-else-if、v-else等指令
11 
12 
13 -->
14 <div id="app">
15     <!--v-if条件渲染-->
16 <!--    <p v-if="isLogin">已登录</p>-->
17 
18     <!--v-if和v-else-->
19 <!--    <p v-if="isLogin">已登录，显示视频</p>-->
20 <!--    <p v-else>未登录，不显示视频</p>-->
21 
22     <!--v-if、v-else-if和v-else-->
23     <p v-if="vipType==1">普通会员</p>
24     <p v-else-if="vipType==2">超级会员</p>
25     <p v-else-if="vipType==3">超级超级大会员</p>
26     <p v-else>不是会员</p>
27 </div>
28 <script src="../js/vue.js"></script>
29 <script>
30     let vm = new Vue({
31         el: '#app',
32         data: {
33             isLogin: true,
34             vipType:2
35         }
36     });
37 </script>
38 </body>
39 </html>

 

 

 

 
posted @ 2020-05-14 07:58  范仁义  阅读(170)  评论(0)    收藏  举报