vue中的条件渲染
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中的条件渲染相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="app" style="height:360px;border:1px solid red" @click="handleClick">
//v-show:已经渲染，只是隐藏或显示<br>
<div v-if="show">message</div>
//v-if:存在或不存在(移除)。很显然v-show性能更高，它不用删除、添加<br>
<div v-show="show">message</div>
//if else语句<b style="color:red">(注意，if、else标签之间不能有阻隔，否则报错)</b>：<br>
<div v-if="show">if</div>
<div v-else="show">else</div>
//if else ifelse(同样要连在一起写)<br>
<div v-if="show == ‘a‘">a</div>
<div v-else-if="show == ‘b‘">b</div>
<div v-else="show">other</div>
//一个诡异的现象：帐号、邮箱再怎么切换，input中输入的内容不变(vue会尽量复用，但是并没有清空内容)<br>
<div v-if="show">
帐号:<input type="text" name="account"/>
</div>
<div v-else>
邮箱:<input type="text" name="email"/>
</div>
//解决办法是加key(当给一个元素加key值的时候，vue会知道它是唯一元素，如果不一样则不复用值)<br>
<div v-if="show">
帐号:<input type="text" name="account" key="account" />
</div>
<div v-else>
邮箱:<input type="text" name="email" key="email" />
</div>
</div>
<script type="text/javascript">
var vm = new Vue(
el: "#app",
data:
show: false,
message: "hello world"
,
methods:
handleClick: function()
this.show = !this.show
);
</script>
</body>
</html>以上是关于vue中的条件渲染的主要内容，如果未能解决你的问题，请参考以下文章