vue3 v-if 判断只执行一方
时间: 2023-07-12 08:13:27 浏览: 54
在 Vue3 中,你可以使用 `v-if` 指令来实现条件判断,只执行其中一方。与 Vue2 不同的是,在 Vue3 中,你可以使用 `v-if` 与 `v-else` 或者 `v-if` 与 `v-else-if` 来进行条件判断。
例如:
```
<template>
<div>
<p v-if="isTrue">条件成立,执行这段文字</p>
<p v-else>条件不成立,执行这段文字</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const isTrue = ref(true);
return {
isTrue
}
}
}
</script>
```
如果 `isTrue` 为 `true`,则只会执行第一个 `<p>` 标签中的内容,如果为 `false`,则只会执行第二个 `<p>` 标签中的内容。
如果你需要进行多重条件判断,可以使用 `v-else-if`,例如:
```
<template>
<div>
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 80">良好</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const score = ref(85);
return {
score
}
}
}
</script>
```
以上代码中,如果 `score` 大于等于 90,执行第一个 `<p>` 标签中的内容;如果 `score` 大于等于 80,执行第二个 `<p>` 标签中的内容;如果 `score` 大于等于 60,执行第三个 `<p>` 标签中的内容;否则,执行最后一个 `<p>` 标签中的内容。