条件渲染
1.v-if
写法:
(1)v-if='表达式'
(2)v-else-if='表达式'
(3)v-else='表达式'
适用于:切换频率较低的场景
特点:不展示的dom元素直接被移除
注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被打断
2.v-show
写法:v-show='表达式'
适用于:切换频率较高的场景
特点:不展示的dom元素未被移除掉,仅仅是使用样式隐藏掉
3.备注:使用v-if时,元素可能无法获取到,但使用v-show一定可以获取到
<div id="root">
<h2 v-show="true">当前的n值是{{n}}</h2>
<button @click = "n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="true">欢迎来到{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎来到{{name}}</h2>
<h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->
<!-- v-else和v-else-if -->
<!-- <div v-if="n === 1">object-c</div>
<div v-else-if="n === 2">vue</div>
<div v-else-if="n === 3">java</div>
<div v-else>哈哈哈</div> -->
<!-- v-if和template的配合使用 -->
<template v-if="n === 1">
<h2>你好</h2>
<h2>清华</h2>
<h2>北京</h2>
</template>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:"#root",
data:{
name:"北京大学",
n:0
},
})
</script>
网友评论