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，则对应的dom节点会被删掉。不显示时，第一次就直接不渲染，如果是内容已经显示，将内容直接从Dom去除，只是渲染一次的内容用

v-show：是通过display属性进行的控制。不显示时，就会改为display：none，但是会渲染在dom上，需要反复切换内容，使用v-show

v-show切换显示：

    <div id="ceshi" >
    <div v-show="isShow" id="pane">
          测试一下
    </div>
    <button @click="showBtn">切换显示内容</button>
    </div>
    <script>
        var ceshi = new Vue({
            el:"#ceshi",
            data:{
                isShow:true,
            },
            methods: {
                showBtn:function(){
                    this.isShow=!this.isShow //也可以用ceshi.isShow=!ceshi.isShow,如果用false的话就只能改变一次 
                }
            },
        })
    </script>

if-elsei实现tab切换

<div id="app">
        <h3 v-if="tab==1">标题1</h3>
        <h3 v-else-if="tab==2">标题2</h3>
        <h3 v-else>标题3</h3>
        <div>
            <button @click="changeBtn" data-id="1">标题1</button>//这里的data-id是指的点击按钮之后target内容中dataset里面的id号
            <button @click="changeBtn" data-id="2">标题2</button>
            <button @click="changeBtn" data-id="3">标题3</button>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                tab: 1,
            },
            methods: {
                changeBtn: function (e) {
                    console.log(e)
                    this.tab = e.target.dataset.id //将Vue对象里面的data中的tab的值赋为点击按钮之后的目标id值
                }
            }
        })