使用属性Props完成一张卡片
一:我们先安装bootstrap,为了使我们的样式好看些 cnpm install bootstrap --save
二:我们在index.js中引入bootstap
Import ‘bootstrap/dist/css/bootstrap.min.css’
三:我们新建一个conponments文件夹,然后我们新建一个NameCard.js
然后我们在App.js中引入NameCard组件,并在标签中传入我们想要的值name和number
注意:如果小伙伴们是跟着上一届节的程序走的话,我们需要进入index.js中把Welcome改为App,如果是这一节直接写的,就不用担心这个问题了
四:运行我们的项就可以了目cnpm start
五:我们接下来在添加一个是否是人类和一个标签
首先我们使用三元表达式来判断是否是人类,我们在NameCard的里面添加 isHuman ? ‘人类’:’外星人’;在添加标签的时候我们使用map去循环
这里面有一个知识点需要注意,就是span标签中的key值,正常情况下我们接收到后台传过来的值之后,都会随带一个索引,这个key我们一般都用这个索引来表示,也可以理解成唯一的。他和vue中 v-for是一个道理的,但是这里当后台给我们传给我们的数据基本都会带一个id,我们如果把key值用这个id来表示,他其实响应效果要比用index好一点;这里我们为了简单,就用index了。
随后,我们需要在App.js中添加我们的tags,我们自定义一个数组const tags = [‘恐龙’,’超人’];在NameCard组件中引入isHunman和 tags = {tags}
使用属性Props完成一张卡片的更多相关文章
- React学习:状态(State) 和 属性(Props)
State 与 Props 区别props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法 ...
- vue组件之属性Props
组件的属性和事件 父子组件之间的通信 父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息. ...
- 组件的属性props
组件的属性props 是不能自己改的,一般是从外面传进来.在组件的视图中用,this.props.XXX 表示该组件的XXX 属性
- Vue系列: 如何通过组件的属性props设置样式
比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components ...
- React入门---属性(props)-8
Props 和 State对于组件Component是非常重要的两个属性. 区别:State对于模块来说是 自身属性: Props对于模块来说是 外来属性: 同样的,props也是只作用于当前的组 ...
- HTML5 number类型文本框step属性的验证机制——张鑫旭
我在下一盘很大的棋,本文只是其中的一个棋子. 需要提前知道的: 目前而言,对step雄起的浏览器为IE10+, Chrome以及Opera浏览器. 需要预先知道number类型input的一些基本知识 ...
- 小tip:巧用CSS3属性作为CSS hack——张鑫旭
一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是 ...
- vue 组件属性props,特性驼峰命名,连接线使用
网址:https://www.cnblogs.com/alasq/p/6363160.html 总结如下:vue的组件的props属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定 ...
- Vue ref属性 && props配置项
1 // # ref属性: 2 // # 1.用来给元素或者子组件注册引用信息(id的替代者) 3 // # 2.应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc) ...
随机推荐
- 转:问题解决:The project cannot be built until build path errors are resolved
转自:http://blog.csdn.net/marty_zhu/article/details/2566299 今天在eclipse里遇到这个问题,之前也遇到过,不过,通过clean一下项目,或者 ...
- Keras 自适应Learning Rate (LearningRateScheduler)
When training deep neural networks, it is often useful to reduce learning rate as the training progr ...
- 移动 App 接入 QQ 登录/分享 图文教程
移动 App 接入 QQ 登录/分享 图文教程 这里先要提两个平台,腾讯开放平台和 QQ 互联平台: (一)腾讯开放平台 官网地址:https://open.tencent.com/ 介绍:腾讯开放平 ...
- Android自定义View之绘制虚线
现在实现一个效果,有个虚线分割和阴影效果.一个一个实现. 分为2中方式. 1.设计出图,我们SRC引入进来(最简单,但是需要其他资源支持). 2.code实现,有些难度,需要查资料. 现在把第2种方式 ...
- socket概念 套接字
理解socket soxket因为TCP是面向流的,你发的信息如果很多很快,TCP这样就会形成黏包 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socke ...
- Zip压缩/解压缩(文件夹)
#PS2.0压缩为.zip文件: $zip = "D:\audit_log\test.zip"New-Item $zip -ItemType file$shellApplicati ...
- 自动出题判分——c#学习实践
1.程序功能自动出题—(程序随意给出10以内加减乘除)并且判断结果正确与否,正确打对勾,错误打错号. 2.设计界面: 3.代码: using System; using System.Collecti ...
- Mininet自定义网络拓扑
在Mininet上的网络拓扑有两种方式 第一种 用mininet自带的miniedit可视化工具,在mininet/mininet/examples/的目录下的一个miniedit.py,运行这个文件 ...
- 当有多个相同的DIV时,我怎么判断我点击的是哪个嘞
链接:https://segmentfault.com/a/1190000003480973?utm_source=tuicool&utm_medium=referral 序言 这是我曾经面试 ...
- list 去重并保持原来排序
public <T> List<T> removeDuplicateKeepOrder(List<T> list){ /* Set set = new HashSe ...