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,这样改变条件表单内容会清空!

本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《VUe入门详解之条件渲染
分享到:更多

相关推荐

未登录,暂时无法评论和查看评论!

点击这里给我发消息点击此处联系博主!