举一个v-if使用的详细案例
时间: 2023-10-23 08:26:14 浏览: 76
当用户需要根据不同的条件展示不同的内容时,可以使用v-if指令。例如,在一个用户列表页中,需要根据用户的性别区分不同的显示方式,可以这样使用v-if:
```html
<template>
<div>
<div v-if="gender === 'male'">
<h1>男性用户</h1>
<ul>
<li v-for="(user, index) in maleUsers" :key="index">{{ user.name }}</li>
</ul>
</div>
<div v-else>
<h1>女性用户</h1>
<ul>
<li v-for="(user, index) in femaleUsers" :key="index">{{ user.name }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
gender: 'male',
maleUsers: [
{ name: '张三', age: 28 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
],
femaleUsers: [
{ name: '小红', age: 23 },
{ name: '小明', age: 27 },
{ name: '小花', age: 26 }
]
}
}
}
</script>
```
这段代码中,根据用户的性别展示不同的用户列表,如果gender等于'male',则展示男性用户列表,否则展示女性用户列表。使用v-if指令,可以让页面按需加载不同的内容,提高了页面的渲染效率。