VUe入门详解之条件渲染
在vue条件渲染存在v-if,v-show,v-else
v-if和v-show效果一样,当不满足条件时候,页面不显示响应内容,但是v-if不满足条件,不挂载在dom中,而v-show只是dispaly:none隐藏了!
v-if和v-else需要放在一起使用
<div id="app">
<!--<h1 v-if="show">{{msg}}</h1>-->
<!--<h2 v-show="show">{{msg}}</h2>-->
<p v-if="type">邮箱: <input type="text" key="email"></p>
<p v-else>用户名: <input type="text" key="user"></p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
type:true,
show:false,
msg:"十月梦想"
}
})
</script>如果使用v-if和v-else则使用input不会情况表单内容,需要制定一个唯一的key,这样改变条件表单内容会清空!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读