首页 > 其他 > 详细

vue中的条件渲染

时间:2019-07-11 00:04:24      阅读:118      评论:0      收藏:0      [点我收藏+]
<!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>

vue中的条件渲染

原文:https://blog.51cto.com/5660061/2419157

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!