<!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>