vue中的显示和隐藏有两种方式

  1.v-if   ( 相当于动态创建的标签,在html 结构中,是不存在的。 )

  2. v-show(控制的是 html 的css display:none  属性。结构体是存在的)

问题?

在使用v-if 的时候,通过props 接收的值,有的时候是 undefined,或者是报错。

自己验证解决:

vue  的生命周期 会在当所有的 DOM数结构渲染完毕的时候,在进行vue 中的一些基本的数据传值,双向数据绑定,渲染组件。 所以,当我们通过父组件 传值的时候,如果是 v-if ,动态添加 dom 数结构。根据生命周期的顺序,props 接收的值,会是undefined 。

所以,在一般的情况下,如果考虑到会操作DOM 的时候,我们选用v- show。

反之,我们用 v-if 。

( 子组件,建议使用 v- if )

如果有说的不是很合理的地方,希望走过,路过的大牛,帮忙指点。

vue (v-if show 问题)的更多相关文章

  1. vue.js在windows本地下搭建环境和创建项目

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  2. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  3. Vue.js的从入门到放弃进击录(二)

    哇塞,昨晚更新的篇(一)这么多阅读量,看来入坑的人越来越多啦~熬了一个礼拜夜,今天终于生病惹~国庆要肥家咯·所以把篇(二)也更完.希望各位入坑的小伙伴能少跳几个坑呗.如果有什么不对的地方也欢迎讨论指正 ...

  4. vue初级学习--环境搭建

    一.导语 最近总想学点东西,es6啊.typescript啊,都想学,刚好有个机遇,可以学点vue,嗯,那就开始吧. 二.正文 1.node环境: 下载安装nodeJs,最好是1.6以上的版本,下载地 ...

  5. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  6. 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  7. 怎么看vue版本

    查看vue版本号是 vue -V 而不是npm vue -v ,npm vue -v 等同于npm -v vue -V: 后面那个V是大写的.

  8. vue不是内部或外部命令,配置一个Path系统变量就可以解决

    作为一个vue小白,最近为vue安装真是操碎了心.无论怎么查找网上的教程,还是解决不了"vue不是内部或外部的命令"诸如此类的问题.好在功夫不负有心人,终于在多次的试验下,成功解决 ...

  9. 如何用vue实现树形菜单?

    在公司培训了2周,布置的作业是从树形,grid分页以及echarts中选一个.由于都不是很熟,就挑了第一个.本来想在网上找找参考,然后模仿着做一个,但是网上的代码多少参差不齐,写到一半没了,所以只要自 ...

  10. vue初学者

    先分享一波福利 vue学习视频    链接:https://pan.baidu.com/s/1ggSfE75 密码:7h2a        1.先安装 webpack vue-cli          ...

随机推荐

  1. SQL 循环30日

    循环30日的统计 大概格式是 with Date as ( select cast(DATEADD(mm, DATEDIFF(mm,,getdate()), ) as datetime) Date u ...

  2. RecordAccumulator 1

    介绍 前面讲过producer会将数据保存在RecordAccumulator中,并通过Sender发送数据.RecordAccumulator 就相当于一个队列保存着那些准备发送到server的数据 ...

  3. Android——PullToRefresh自动刷新

    需求:强制刷新 方法一: PullToRefreshListView本身提供了一个setRefreshing()接口,调用该接口会自动触发下拉刷新的操作(前提是支持下拉刷新).按照一般的操作我们直接在 ...

  4. dedecms实现表单提交数据到指定的邮箱

    1.http://blog.csdn.net/webnoties/article/details/17219219 2.http://www.jz96.com/451.html 3.https://m ...

  5. Future模式 总结

    future模式解决异步代码的组织(混入)问题: 类似的解决方案: 1.网络响应的block: 2.SDImageview的自组织.代理模式: 3.顶层响应机制的协议机制:

  6. dd---复制文件并对原文件的内容进行转换和格式化处理

    dd命令用于复制文件并对原文件的内容进行转换和格式化处理.dd命令功能很强大的,对于一些比较底层的问题,使用dd命令往往可以得到出人意料的效果.用的比较多的还是用dd来备份裸设备.但是不推荐,如果需要 ...

  7. Git学习笔记 1,GitHub常用命令1

    廖雪峰Git教程 莫烦Git教程 莫烦Git视频教程 --------------- init > apt-get install git # 安装 > mkdir /home/yzn_g ...

  8. win10如何设置开机自动启动热点WIFI?

    1.编写脚本文件(先新建txt文件,编写代码内容netsh wlan start hostednetwork,最后重命名成HotSpot.bat):文件名称:HotSpot.bat,代码内容: net ...

  9. 洛谷 P1583 魔法照片

    P1583 魔法照片 题目描述 一共有n(n≤20000)个人(以1--n编号)向佳佳要照片,而佳佳只能把照片给其中的k个人.佳佳按照与他们的关系好坏的程度给每个人赋予了一个初始权值W[i].然后将初 ...

  10. html5缓存

    HTML5 提供了两种在client存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 这些都是由 coo ...