Vue.js 是一款流行的 JavaScript 框架，可以用于构建响应式的 Web 界面。在 Vue.js 中，条件渲染是指基于某些条件的布尔值来决定是否渲染 DOM 元素。Vue.js 提供了几种条件渲染的方式，本文将介绍这些方法的使用方法和注意事项。
使用 v-if 和 v-else-if 指令
Vue.js 中最常用的条件渲染方式是使用 v-if 和 v-else-if 指令。v-if 指令可以控制是否渲染 DOM 元素，如果条件满足，就会渲染对应的元素；如果条件不满足，就不会渲染元素。例如：
<div v-if="userLoggedIn">
欢迎 {{ username }}！
</div>
<div v-else>
请先登录。
</div>在上面的例子中，如果 userLoggedIn 的值为 true，就会显示第一个 div 元素，包含欢迎消息和用户名；如果 userLoggedIn 的值为 false，就会显示第二个 div 元素，提示用户先登录。
v-else-if 指令可以用来添加额外的条件，例如：
// www.javascriptcn.com code example <div v-if="userType === 'admin'"> 您是管理员。 </div> <div v-else-if="userType === 'member'"> 您是普通用户。 </div> <div v-else> 请先登录。 </div>
在上面的例子中，v-else-if 用来判断用户角色类型，如果是管理员就渲染第一个元素，如果是普通用户就渲染第二个元素，如果都不是就显示第三个元素。
使用 v-if 和 v-else-if 指令的注意事项包括：
- 指令的值必须是一个 JS 表达式，可以是一个函数或返回布尔值的表达式。
- 可以使用
{}的形式来表达较为复杂的条件表达式。
使用 v-show 指令
v-show 指令也可以用来控制是否渲染 DOM 元素，但与 v-if 不同的是，即使条件不满足，元素依然会存在于 DOM 中，只是通过设置 display 属性来隐藏元素。例如：
<div v-show="showDisclaimer"> 本网站仅用于学术交流，请勿商用。 </div>
在上面的例子中，如果 showDisclaimer 的值为 true，就会显示该元素，否则就会隐藏该元素。
使用 v-show 指令的注意事项包括：
v-show的值也必须是一个 JS 表达式，可以是一个函数或返回布尔值的表达式。- 对于频繁切换的元素，
v-show的性能要优于v-if。
使用 v-if 和 v-for 指令
在使用 v-if 和 v-for 指令同时存在的情况下，需要注意指令的顺序。如果 v-if 的条件不满足，那么 v-for 指令也不会生效。例如：
<div v-for="item in items" v-if="item.visible">
{{ item.text }}
</div>在上面的例子中，只有 item.visible 的值为 true 的元素才会被渲染，其他元素会被忽略。
注意条件渲染的性能问题
在进行条件渲染时，应注意一些性能问题：
- 避免在模板中使用复杂的表达式。
- 尽可能使用
v-show指令代替v-if，除非需要在条件改变时执行额外的逻辑（如销毁和重建子组件）。 - 避免使用内联模板，尽可能使用组件化架构。
示例代码
下面是一个基于 Vue.js 的条件渲染示例，包含了 v-if 和 v-show 的使用方法：
// www.javascriptcn.com code example
<div id="app">
<div v-if="userLoggedIn">
欢迎 {{ username }}！
</div>
<div v-else>
请先登录。
</div>
<div v-show="showDisclaimer">
本网站仅用于学术交流，请勿商用。
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
userLoggedIn: false,
showDisclaimer: true,
username: '张三'
}
})
</script>在上面的示例中，如果 userLoggedIn 的值为 true，就会显示欢迎消息和用户名；如果 userLoggedIn 的值为 false，就会显示提示信息。同时，无论 showDisclaimer 的值为何，都会显示网站免责声明。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ba9a47306f20b3a69825da