在html标签可以添加v-if指令指定一个条件，如果条件成立则显示此HTML标签，如果不成立则不显示当前标签。
条件可以是一个表达式，也可以是一个具体的布尔类型值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<h3 v-if="code == 1">从前有座山</h3>
<h3 v-if="b">从前有座山</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
code:2,
b:false
}
});
</script>
</body>
</html>
v-else的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<h3 v-if="code == 1">从前有座山</h3>
<!--v-else标签需要紧跟在v-if的标签后，中间不能有其他标签-->
<h3 v-else>山里有座庙</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
code:1,
}
});
</script>
</body>
</html>
v-else-if多分支语句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<h3 v-if="code == 1">从前有座山</h3>
<!--v-else标签需要紧跟在v-if的标签后，中间不能有其他标签-->
<h3 v-else>山里有座庙</h3>
<h3 v-if="code >= 90">优秀</h3>
<h3 v-else-if="code >= 80">良好</h3>
<h3 v-else-if="code >= 70">中等</h3>
<h3 v-else-if="code >= 60">及格</h3>
<h3 v-else>不想理你</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
code:100
}
});
</script>
</body>
</html>
v-show
从功能上讲，与v-if作用相同。渲染过程有区别。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<h3 v-if="code == 1">从前有座山</h3>
<!--v-else标签需要紧跟在v-if的标签后，中间不能有其他标签-->
<h3 v-else>山里有座庙</h3>
<h3 v-if="code >= 90">优秀</h3>
<h3 v-else-if="code >= 80">良好</h3>
<h3 v-else-if="code >= 70">中等</h3>
<h3 v-else-if="code >= 60">及格</h3>
<h3 v-else>不想理你</h3>
<!--不符合条件，直接不渲染-->
v-if : <label v-if="gender == 'M'">男</label><br />
<!--不管条件成不成立都渲染,条件不成立则不显示-->
v-show : <label v-show="gender == 'M'">男</label>
<br />
<input type="text" v-model="gender" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
code:100,
gender:"M"
}
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/128149.html
