使用v-if
指令创建一个<div>
如果条件为“真”,则为元素。
<div v-if="createImgDiv">
<img src="/img_apple.svg" alt="apple">
<p>This is an apple.</p>
</div>
运行示例 »
请参阅下面的更多示例。
这个v-if
指令用于有条件地渲染元素。
什么时候v-if
用于元素,它后面必须跟一个表达式:
当使用切换元素时v-if
:
<Transition>
当元素进入和离开 DOM 时要动画化的组件。笔记:不建议使用v-if
和v-for
在同一个标签上。如果两个指令都用在同一个标签上,v-if
将无权访问所使用的变量v-for
, 因为v-if
优先级高于v-for
。
本概述描述了如何一起使用用于条件渲染的不同 Vue 指令。
指令 | 细节 |
---|---|
v-if |
可单独使用,或与v-else-if 和/或v-else 。如果里面的条件v-if 是真的',v-else-if 或者v-else 不予考虑。 |
v-else-if |
必须在之后使用v-if 或其他v-else-if 。如果里面的条件v-else-if 是真的',v-else-if 或者v-else 之后的内容不予考虑。 |
v-else |
如果 if 语句的第一部分为 false,则这部分将会发生。必须放在 if 语句的最末尾,之后v-if 和v-else-if 。 |
使用v-if
以数据属性作为条件表达式,以及v-else
。
<p v-if="typewritersInStock">
in stock
</p>
<p v-else>
not in stock
</p>
亲自试一试 »
使用v-if
以比较检查作为条件表达式,以及v-else
。
<p v-if="typewriterCount > 0">
in stock
</p>
<p v-else>
not in stock
</p>
亲自试一试 »
使用v-if
和...一起v-else-if
和v-else
根据存储的打字机数量显示状态消息。
<p v-if="typewriterCount>3">
In stock
</p>
<p v-else-if="typewriterCount>0">
Very few left!
</p>
<p v-else>
Not in stock
</p>
亲自试一试 »
使用v-if
使用原生 JavaScript 方法作为条件表达式,以及v-else
。
<div id="app">
<p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
亲自试一试 »
使用v-if
渲染一个<div>
从 API 接收数据时标记。
<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>
运行示例 »
使用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>
运行示例 »
使用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 生命周期挂钩
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!