溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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" @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 >(注意，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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
