条件渲染

v-if

• 写法 跟 if else 语法类似，通过判断表达式返回的值是true还是false来决定是否显示

  • v-if="表达式"

  • v-else-if="表达式"

  • v-else

• 适用于：切换频率较低的场景，因为不展示的DOM元素直接被移除

• 注意：v-if可以和v-else-if v-else一起使用，但要求结构不能被打断

<div v-if="num<60">不及格</div>
<div v-else-if="num>60&&num<80">及格</div>
<div v-else-if="num>80&&num<90">良好</div>
<div v-else>优秀</div>

<script>
    const vm = new Vue({
        el: '#app',
        data:{
            num:65
        }
    })
</script>

v-show

• 写法：v-show="表达式"，通过判断表达式返回的值是true还是false来决定是否显示

• 适用于：切换频率较高的场景

• 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉display: none

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

template标签不影响结构，页面html中不会有此标签，但只能配合v-if，不能配合v-show

<div v-show="true">这是个广告</div>