简介
Vue.js是一个简单的Web应用框架，用于创建动态Web界面和单页应用（SPA）。当我们创建这些应用程序时，经常会想根据一个特定的标准来渲染一些东西--这就是条件渲染的本质。
条件性渲染是指根据一个条件是否为真来渲染不同的用户界面（UI）标记的能力。这个概念经常被用于显示或隐藏组件（切换）、切换应用功能、处理认证和授权等情况。
在这篇文章中，我们将通过使用
v-if,v-else-if, 和v-else指令来了解Vue.js中条件性渲染的各种方式。我们还将看看一些例子，并强调v-if和v-show之间的区别。
v-if
v-if 指令用于有条件地渲染一个块，这意味着只有当指令的表达式返回一个true 的值时，才会产生带有v-if 属性的块。如果表达式产生一个无效的结果（例如：null,0, empty string,false ），该元素将从DOM中删除。
让我们在实际例子上说明这个行为。
<div v-if="login">
<p>This user has been logged in!... Welcome.</p>
</div>
<script>
export default {
data() {
return {
login: true,
};
}
};
</script>
由于login 被设置为true ，包含v-if 指令的<div> 块将被产生，从而被显示。
v-ifvsv-show
值得注意的是，在上面的例子中，v-show 也会起作用，而且功能似乎是相同的，但这两者之间是有区别的。
v-if有条件地渲染一个元素，而v-show有条件地显示/显示一个元素。
这意味着，当条件被切换时，v-if 将实际删除和恢复组件，而v-show 只是使它们不可见或可见。下面的动画说明了v-if 是如何实际删除和再现代码块的。
同时，v-show 将始终保持DOM中的元素，只是改变其CSS以切换其外观（通过将其display 设置为none ）。
v-else
v-else 指令是一个v-if 指令，允许你在条件渲染中自定义false 值。如果它不是true ，你可以用v-else 来定义应该发生什么来代替。
例如，假设我们有一个密码输入，如果输入的长度小于6，我们希望它产生一个错误信息*"弱密码"，如果长度大于6，则显示"强密码"*。
这是一个条件渲染，有一个处理假情况的选项。
<form>
<input type="password" v-model="password" placeholder="Enter your password" />
<p v-if="password.length > 6">Strong Password</p>
<p v-else>Weak Password</p>
</form>
<script>
export default {
data() {
return {
password: ""
};
}
};
</script>
注意： v-if/v-else 就像JavaScript中的正则表达式if 和if...else 。
让我们利用这一点来切换一个简单的登录页面的内容，使其根据用户是否登录而改变信息。我们也将根据userLoggedIn 状态来修改按钮的措辞。
<div id="app">
<div v-if="userLoggedIn">
<h2>Hello Welcome!</h2>
<p>You have sucessfully logged in to your user account!</p>
</div>
<div v-else>
<p>Please Log In to access your account!</p>
</div>
<button @click="userLoggedIn = !userLoggedIn">
<p v-if="!userLoggedIn">Login</p>
<p v-else>LogOut</p>
</button>
</div>
<script>
export default {
data() {
return {
userLoggedIn: false
};
}
};
</script>
该按钮的点击事件将切换userLoggedIn 数据项，这将影响显示的数据，如下图所示。
v-else-if
v-else-if extends a v-if 用一个 块。这与JavaScript的 块类似，它允许我们在现有的 中添加一个if语句。当有许多标准需要检查时，可以使用这种方法，并且可以多次链起来。else...if else...if v-if
<form>
<input type="password" v-model="password" placeholder="Enter your password" />
<p v-if="password.length < 4">Weak Password</p>
<p v-else-if="password.length < 7">Fairly Strong Password</p>
<p v-else>Strong Password</p>
</form>
<script>
export default {
data() {
return {
password: ""
};
}
};
</script>
**注意：**当v-if 和v-for 都被用于同一个元素时，v-if 会先被评估。这只是意味着不建议在同一个元素上使用v-if 和v-for ，因为有隐含的优先权。
总结
在这篇文章中，我们已经看到了如何用v-if,v-else, 和v-else-if 来有条件地渲染一个元素。我们还解释了v-if 和v-show 之间的区别。
