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:''
}
})
}