一、基础语法
v-if
v-else
v-else-if
v-show
v-if
和v-show
的区别
v-if
可以实现更多条件判定,而v-show
只能实现真假判定v-show
会加载组件,只是不显示出来;v-if
则不会加载组件。所以v-show
有较高的初始渲染开销,v-if
则会有比较高的使用加载时开销
二、v-if
使用下述代码替换 app.vue
中的代码
<script setup>
const flag = 3
</script>
<template>
<p v-if="flag===1">flag=1 的时候才会打印</p>
<p v-else-if="flag===2">flag=2 的时候才会被打印</p>
<p v-else>flag不等于1和2的时候才会被打印</p>
</template>
三、v-show
使用下述代码替换 app.vue
中的代码
<script setup>
const res1 = true
const res2 = false
</script>
<template>
<p v-show="res1">为真时可以看到</p>
<p v-show="res2">为假时看不到</p>
</template>