Vue v-if 指令
示例
使用 v-if 指令来创建 <div> 元素，如果条件为 'true'。
<div v-if="createImgDiv">
<img src="/img_apple.svg" alt="apple">
<p>This is an apple.</p>
</div>
查看下面的更多示例。
定义和用法
v-if 指令用于有条件地渲染元素。
当 v-if 用于元素时，它后面必须紧跟一个表达式
- 如果表达式的计算结果为 'true'，则该元素及其所有内容将在 DOM 中创建。
- 如果表达式的计算结果为 'false'，则该元素将被销毁。
当元素使用 v-if 切换时
- 我们可以使用内置的
<Transition>组件来为元素进入和离开 DOM 时设置动画。 - 将触发生命周期钩子，例如 'mounted' 和 'unmounted'。
注意：不建议在同一个标签上使用 v-if 和 v-for。如果在同一个标签上同时使用这两个指令，v-if 将无法访问 v-for 使用的变量，因为 v-if 的优先级高于 v-for。
用于条件渲染的指令
本概述描述了如何将用于条件渲染的不同 Vue 指令一起使用。
| 指令 | 详情 |
|---|---|
v-if |
可以单独使用，也可以与 v-else-if 和/或 v-else 一起使用。如果 v-if 内部的条件为 'true'，则不考虑 v-else-if 或 v-else。 |
v-else-if |
必须在 v-if 或另一个 v-else-if 之后使用。如果 v-else-if 内部的条件为 'true'，则不考虑其后出现的 v-else-if 或 v-else。 |
v-else |
如果 if 语句的第一部分为假，则将执行此部分。必须放在 if 语句的最后，在 v-if 和 v-else-if 之后。 |
更多示例
示例 3
使用 v-if 与 v-else-if 和 v-else 一起使用，根据存储中的打字机数量显示状态消息。
<p v-if="typewriterCount>3">
有货
</p>
<p v-else-if="typewriterCount>0">
仅剩少量！
</p>
<p v-else>
缺货
</p>
自己试试 »
示例 4
使用 v-if 与原生 JavaScript 方法作为条件表达式，以及 v-else。
<div id="app">
<p v-if="text.includes('pizza')">文本包含单词 'pizza' </p>
<p v-else>文本中未找到单词 'pizza' </p>
</div>
data() {
return {
text: '我喜欢 taco、pizza、泰式牛肉沙拉、河粉汤和塔吉锅。'
}
}
自己试试 »
示例 5
使用 v-if 在从 API 接收数据时渲染 <div> 标签。
<template>
<h1>Example</h1>
<p>Click the button to fetch data with an HTTP request.</p>
<p>Each click generates an object with a random user from <a href="https://random-data-api.com/" target="_blank">https://random-data-api.com/</a>.</p>
<p>The robot avatars are lovingly delivered by <a href="http://Robohash.org" target="_blank">RoboHash</a>.</p>
<button @click="fetchData">Fetch data</button>
<div v-if="data" id="dataDiv">
<img :src="data.avatar" alt="avatar">
<pre>{{ data.first_name + " " + data.last_name }}</pre>
<p>"{{ data.employment.title }}"</p>
</div>
</template>
<script>
export default {
data() {
return {
data: null,
};
},
methods: {
async fetchData() {
const response = await fetch("https://random-data-api.com/api/v2/users");
this.data = await response.json();
},
}
};
</script>
<style>
#dataDiv {
width: 240px;
background-color: aquamarine;
border: solid black 1px;
margin-top: 10px;
padding: 10px;
}
#dataDiv > img {
width: 100%;
}
pre {
font-size: larger;
font-weight: bold;
}
</style>
示例 6
使用 v-if 创建组件，以便触发 mounted 生命周期钩子。
CompOne.vue:
<template>
<h2>Component</h2>
<p>Right after this component is added to the DOM, the mounted() function is called and we can add code to that mounted() function. In this example, an alert popup box appears after this component is mounted.</p>
<p><strong>Note:</strong> The reason that the alert is visible before the component is visible is because the alert is called before the browser gets to render the component to the screen.</p>
</template>
<script>
export default {
mounted() {
alert("The component is mounted!");
}
}
</script>
App.vue:
<template>
<h1>The 'mounted' Lifecycle Hook</h1>
<button @click="this.activeComp = !this.activeComp">Create component</button>
<div>
<comp-one v-if="activeComp"></comp-one>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: false
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 20px;
margin: 10px;
width: 400px;
background-color: lightgreen;
}
</style>
示例 7
使用 v-if 切换 <p> 元素，以便触发动画。
<template>
<h1>Add/Remove <p> Tag</h1>
<button @click="this.exists = !this.exists">{{btnText}}</button><br>
<Transition>
<p v-if="exists">Hello World!</p>
</Transition>
</template>
<script>
export default {
data() {
return {
exists: false
}
},
computed: {
btnText() {
if(this.exists) {
return 'Remove';
}
else {
return 'Add';
}
}
}
}
</script>
<style scoped>
.v-enter-from {
opacity: 0;
translate: -100px 0;
}
.v-enter-to {
opacity: 1;
translate: 0 0;
}
.v-leave-from {
opacity: 1;
translate: 0 0;
}
.v-leave-to {
opacity: 0;
translate: 100px 0;
}
p {
background-color: lightgreen;
display: inline-block;
padding: 10px;
transition: all 0.5s;
}
</style>
相关页面
Vue 教程：Vue v-if 指令
Vue 参考：Vue v-else-if 指令
Vue 参考：Vue v-else 指令
Vue 教程：Vue 动画
Vue 教程：Vue 生命周期钩子
