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/