• 使用属性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}

  • 相关阅读:
    bzoj 1013: [JSOI2008]球形空间产生器sphere
    bzoj 1012: [JSOI2008]最大数maxnumber
    bzoj 1010: [HNOI2008]玩具装箱toy
    bzoj 1008: [HNOI2008]越狱
    bzoj 1007: [HNOI2008]水平可见直线
    UVa12105 越大越好
    POJ
    最优点配对问题(紫书)
    Ned 的难题
    UVA
  • 原文地址:https://www.cnblogs.com/marksir/p/9889785.html
Copyright © 2020-2023  润新知