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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ionic3+

【Appetite】ionic3实录(二)UI分析及总体配置

首先,如果你是初学者,我强力建议你先看完我这篇文章: 【开发指南】(四)Ionic3快速上手并了解这些

12630
来自专栏前端儿

让 select 的 option 标签支持事件监听(如复制操作)

想自定义option的样式,很多人会建议用 <ul> <li> 标签来辅助同步操作与值

1.3K20
来自专栏极乐技术社区

微信小程序开发小技巧合揖(53个)

微信小程序:wx.navigateTo中url无法跳转问:链接 微信小程序布局之行内元素和块级元素:链接 小程序端JS加密,传输PHP端解密:链接 小程序开发干...

49590
来自专栏前端小作坊

浏览器的overflow事件

Webkit和Firefox其实是原生支持探测元素overflow状态改变的事件。参看这个DEMO:

10210
来自专栏前端人人

React第三方组件1(路由管理之Router的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

28830
来自专栏一个会写诗的程序员的博客

Python 使用 pygame 实现一个简单的动画

20040
来自专栏BestSDK

Mockplus教程:2钟搞定APP首页原型设计,3000个免费素材库

创建项目 ? 打开Mockplus,点击新建项目,选择“手机”项目类型与合适的页面尺寸,点击“确定”即创建成功,是不是不能更简单!无需任何文件创建操作,无需输入...

33350
来自专栏jiajia_deng

react-router 环境使用锚点的方法

15240
来自专栏calmound

基于iframe的移动端嵌套

需求描述 上上周接到了新的项目,移动端需要做一个底部有五个导航,点击不同的导航页面主体显示不同的页面,其中两个页面是自己做,而另外三个页面是引用另外三个网址,其...

63660
来自专栏移动端开发

这个断点可以帮你检查布局约束

前言:     在现在iOS布局中,估计有很多很多开发者会使用到 Masonry 或者用到 SDAutoLayout 或者Storyboard或者还有Xib等等...

22890

扫码关注云+社区

领取腾讯云代金券