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

v-if v-show

<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>



<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>

		//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-if="num>201">num1: {{num}}p>
    <p v-else>num2: {{num}}p>
    
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:''
                }
            })
        }