vue中条件渲染
v-if
v-if
指令用于条件性地渲染一块内容。 这块内容只会在指令的表达式返回 true
值的时候被渲染。
<p v-if="age >= 18">我是成年人</p>
也可以用v-else
添加一个else 块
<p v-if="age >= 18">我是成年人</p>
<p v-else>我还是一个小朋友</p>
v-else-if
提供的是相应于v-if
的“else if
区块”。它可以连续多次重复使用
<div>
<p v-if="age > 18">我是成年人</p>
<p v-else-if="age==18">我今天正好18岁</p>
<p v-else>我还是一个小朋友</p>
<p><input type="text" name="" id="" v-model="age"></p>
</div>
案例
<script>
export default {
data () {
return {
age:18
}
},
methods: {
},
computed: {
},
watch:{
}
}
</script>
<template>
<!-- template就是模版 -->
<div>
<p v-if="age > 18">我是成年人</p>
<p v-else-if="age==18">我今天正好18岁</p>
<p v-else>我还是一个小朋友</p>
<p><input type="text" name="" id="" v-model="age"></p>
</div>
</template>
<style>
</style>
<template>
元素上使用v-if
条件渲染分组
因为
v-if
是一个指令, 所以必须将它添加到一个元素上。但是如果想切换多个元素呢?
此时可以把一个<template>
元素当做不可见的包裹元素, 并在上面使用v-if
。组中的渲染结果将不包含<template>
元素。
案例
<script>
export default {
data () {
return {
age:18
}
},
methods: {
},
computed: {
},
watch:{
}
}
</script>
<template>
<!-- template就是模版 -->
<div>
<!-- 最终渲染的时候, template这个元素不会被渲染出来,这是一个不可见的包裹元素 -->
<template v-if="age>=18">
<p>成年人才能看的内容</p>
<p>成年人才能看的内容</p>
<p>成年人才能看的内容</p>
<p>成年人才能看的内容</p>
</template>
<template v-else>
<p>儿童节目</p>
<p>儿童节目</p>
<p>儿童节目</p>
<p>儿童节目</p>
</template>
<p><input type="text" name="" id="" v-model="age"></p>
</div>
</template>
<style>
</style>
v-show
用法大致和v-if一致, 不同的是带有
v-show
的元素始终会被渲染并保留在DOM
上。
v-show
只是简单地切换元素的display
css property
注意
:v-show
不支持<template>
元素, 也不支持v-else
。
案例
<script>
export default {
data () {
return {
sex:'woman'
}
},
methods: {
},
computed: {
},
watch:{
}
}
</script>
<template>
<!-- template就是模版 -->
<div>
<p v-show="sex=='man'">男生</p>
<p v-show="sex=='woman'">女生</p>
</div>
</template>
<style>
</style>
效果
v-if和v-show的区别
v-show
只是简单地切换元素的display属性, 带有v-show
的元素会**始终保留
**在DOM
元素中。v-if
只要后面为false
, 对应的元素以及子元素都不会被渲染, 控制DOM
元素的创建和销毁。- 当我们频繁的切换状态的时候, 使用
v-show
会更好一些; 当运行时,条件很少改变,或者是一次性的渲染, 使用v-if
会更佳。
案例
<script>
export default {
data () {
return {
sex:'woman',
isShow:false
}
},
methods: {
},
computed: {
},
watch:{
}
}
</script>
<template>
<!-- template就是模版 -->
<div>
<h2 v-if="isShow">v-if显示标题内容</h2>
<h2 v-show="!isShow">v-show显示标题内容</h2>
</div>
<button @click="isShow=!isShow">改变isShow</button>
</template>
<style>
</style>