vue——2-v-if v-show v-else v-else-if

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82716250

v-if v-show

<!--
产生效果相同
v-if    把需要隐藏的注释掉（销毁 缺点：若是事件驱动，则重复创建和销毁，切换消耗高）
v-show  把需要应酬的display掉（display：none   缺点：一开始把隐藏的也要渲染出来，渲染消耗高）

所以，频繁切换使用v-show，运行后不再改变使用v-if
-->

<!--v-if-->
<div id="enjoy">
    <!--传入布尔判断-->
    <p v-if="show">显示</p>
    <p v-if="hidden">隐藏</p>
    <!--传入表达式判断-->
    <p v-if="num1>100">num: {{num1}}</p>
    <p v-if="num2>100">num: {{num2}}</p>
</div>
<!--显示；num：200-->

<!--v-show-->
<div id="enjoy1">
    <!--传入布尔判断-->
    <p v-show="show">显示</p>
    <p v-show="hidden">隐藏</p>
    <!--传入表达式判断-->
    <p v-show="num1>100">num: {{num1}}</p>
    <p v-show="num2>100">num: {{num2}}</p>
</div>
<!--显示；num：200-->

        //v-if
        {
            new Vue({
                el: '#enjoy',
                data: {
                    show: true,
                    hidden: false,

                    num1: 200,
                    num2:90
                }
            })
        }
        //v-show
        {
            new Vue({
                el: '#enjoy1',
                data: {
                    show: true,
                    hidden: false,

                    num1: 200,
                    num2:90
                }
            })
        }

v-else

<div id="enjoy2">
    <!--单独使用会报错：<p v-else="num>201">num: {{num}}</p>-->
    <p v-if="num>201">num1: {{num}}</p>
    <p v-else>num2: {{num}}</p>
    <!--num2: 200-->
</div>

        {
            new Vue({
                el:'#enjoy2',
                data:{
                    num:200
                }
            })
        }

v-else-if

<div id="enjoy3">
    <p>输入成绩对应等级：</p>
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=75">良好</p>
    <p v-else-if="score>=60">合格</p>
    <p v-else>不合格</p>
    <input type="text" v-model="score">
</div>

        {
            new Vue({
                el:'#enjoy3',
                data:{
                    score:''
                }
            })
        }