- <!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>
来源: http://www.bubuko.com/infodetail-3119775.html