vue.js v-if使用，vue.js if...else if使用
阿新 • • 發佈：2018-11-28
vue.js v-if使用，vue.js if...else if使用
================================
©Copyright 蕃薯耀 2018年11月28日
http://fanshuyao.iteye.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue if else</title>
</head>
<body>
<div id="vueDiv">
<div>
<div v-if="resultFlag=='1'">這裡是If</div>
<div v-else-if="resultFlag=='2'">這裡是else if</div>
<div v-else="resultFlag=='3'">這裡是else</div>
<input type="button" value="切換到if" @click="changeToIf"/>
<input type="button" value="切換到else if" @click="changeToElseIf"/>
<input type="button" value="切換到else" @click="changeToElse"/>
</div>
<div style="margin-top: 30px;">
<div v-if="resultFlag=='1'">show 屬性，和if else屬性比較</div>
<div v-show="ok">show</div>
<div v-show="!ok">not show</div>
<input type="button" value="切換到show" @click="changeToShow"/>
<input type="button" value="切換到notShow" @click="changeToNotShow"/>
</div>
</div>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var vueObj = new Vue({
el: "#vueDiv",
data: {
resultFlag : "1",
ok : true
},
methods: {
changeToIf : function(){
this.resultFlag="1";
},
changeToElseIf : function(){
this.resultFlag="2";
},
changeToElse : function(){
this.resultFlag="3";
},
changeToShow(){
this.ok=true;
},
changeToNotShow(){
this.ok=false;
}
}
});
</script>
</body>
</html>
================================
©Copyright 蕃薯耀 2018年11月28日
http://fanshuyao.iteye.com/