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>