VUE之v-if、v-else-if、v-else、v-show用法及区别

v-if、v-else：同if、else的用法

v-if里面的东西是个布尔类型的变量，也可以加条件表达式

<div id="ceshi" >
    <p>用户名：{
  {username}}</p>
    <!-- 判断是不是VIP -->
    <p v-if="isVip">用户类型：vip</p>
    <!-- 注意：v-if和v-sele中间不能有其他元素 -->
    <p v-else>用户类型：普通用户</p>

    <!-- 条件渲染，三个判断 -->
    <!-- 根据年龄显示相应内容 -->
    <p v-if='age>18'>年龄大于18岁</p>
    <p v-else-if='age>14'>年龄大于14岁</p>
    <p v-else>年龄小于14岁</p>
</div>
<script>
        var ceshi = new Vue({
            el:"#ceshi",
            data:{
                isVip:true,//如果是true，显示用户类型为VIP的内容，否则显示下一条普通用户的内容
                username:"小吴",
                age:13,
            }
        })
</script>

v-if：直接修改dom，如果v-if为false，则对应