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>
