使用属性Props完成一张卡片

一:我们先安装bootstrap,为了使我们的样式好看些 cnpm  install bootstrap  --save

二:我们在index.js中引入bootstap

Import ‘bootstrap/dist/css/bootstrap.min.css’

三:我们新建一个conponments文件夹,然后我们新建一个NameCard.js

然后我们在App.js中引入NameCard组件,并在标签中传入我们想要的值namenumber

 

注意:如果小伙伴们是跟着上一届节的程序走的话,我们需要进入index.js中把Welcome改为App,如果是这一节直接写的,就不用担心这个问题了

四:运行我们的项就可以了目cnpm start

五:我们接下来在添加一个是否是人类和一个标签

首先我们使用三元表达式来判断是否是人类,我们在NameCard的里面添加 isHuman ? ‘人类’:’外星人’;在添加标签的时候我们使用map去循环

这里面有一个知识点需要注意,就是span标签中的key,正常情况下我们接收到后台传过来的值之后,都会随带一个索引,这个key我们一般都用这个索引来表示,也可以理解成唯一的。他和vuev-for是一个道理的,但是这里当后台给我们传给我们的数据基本都会带一个id,我们如果把key值用这个id来表示,他其实响应效果要比用index好一点;这里我们为了简单,就用index了。

随后,我们需要在App.js中添加我们的tags,我们自定义一个数组const tags = [‘恐龙’,’超人’];NameCard组件中引入isHunmantags = {tags}

原文地址:https://www.cnblogs.com/marksir/p/9889785.html