10. 尚硅谷_Mpvue_index数据动态展示

好，来我们继续啊，咱们接着上一节课，嗯，接着去做，那上一节课呢，我们是把这个静态页面咱们画完了，那这节课呢，我们去把数据动态的展现一下，OK，那说到这个数据这一块呢，其实首页本来我是用的那个豆瓣图书提供的开放的API，但是因为它的接口现在不能用了，所以呢，在这一块我是怎么做的呢？我是从豆瓣官网上去爬取了一些数据，在我写好这个项目index下面的data里面，我呢复制一份啊，刚刚呢已经放到了我们当前这个页面，这个data，我呢可以带大家去看一下这里面的数据啊，那这个是个杰森的文件，这个文件里面呢是一个数组，数组里面的每一项都是对象。而每一个对象代表的就是一本图书的内容。那这些数据呢，其实也是来源于豆瓣的啊好，假设现在这个就是我们的数据的话，那我们。

首先第一步要用这个数据，是不是应该把它引入啊，那来到我们的页面上来，在这port的这个，嗯，Data from当前路径下的data塔子下面的贝塔点，接着然后呢，我的个人习惯是用一个数据的时候，最好是先去看什么。看一下它的数据类型，好，那这个时候呢，来过来我们看一下它的打印，哎，数轴没问题，然后呢，Object，那说明我们当前引入的是一个原生JS的数组，也就是意味着我们是不是可以直接操作呀。来来到我们的代码这一块，那因为接下来这个数据呢，是要在我们的模板结构里面要用，所以呢，最好是我们上来先给人家把数据是吧，更新到当前实例的贝塔选项中来，你个对象在这呢，我们来一个什么呀？Books read吧，应该是这个data对吧，那现在这个数据有了以后，那我们看看哪在用。

首先下边这个列表list，这肯定要用，所以呢，上来我们可以先在这干嘛，For来把基本的写好item index，然后呢，In这个booksry，紧接着呢，给人家添加一个唯一的K走index。OK，那这个出来以后，我们把里边的数据动态的去换一下啊，那这些就不要了。这呢应该画成item点点什么呢？这应该叫image，我们看一下是不是走，哎image呢是一个普片的地址，顺便呢，我们来看一下title和author，一个是书名，一个是作者，那那整个书名这换一下，呃，item.title哎这个应该是title了，来下面这个作者这呢，我们也去给它画一下item.other然后呢，图片这变量不就说强制去解析一下。

看下效果。他说，Data is not DeFined。嗯，咱们这叫什么叫data啊，不好意思，那看一眼，那这些是不是就出来了，好，那这个列表出来了以后呢，上面这如果说大家想便利的话也可以啊，那有的同学说我们可以截取前四个去便利，那没问题。呃，如果说要截取前四个的话，我们想想怎么做，嗯，怎么做，当然可以想一个问题，我们在文U里面有一个叫计算属性啊，叫comma PU，对吧，那这个计算属性呢，就是根据已有的属性是不是能计算出一个新的值啊。

在这呢，我们叫它carous，那代表浓缩的意思，呃，那这个carous so的话呢，就是这个计算属性，应该是根据原有的属性去计算出一个新的属性啊，我们就去取它里面前四个值啊，O啊，最起码raise.o点我们都知道应该是lies，是不是可以截取0:4，我们直接取前三个，然后便利的时候呢，我们就去便利什么便利这个第那那这个时候呢，在这我们来一个V，嗯，For，然后呢，把基本的写好item index in，这个car OK，然后呢，这也同样的来一个key index，那剩下这些呢，我们就可以拆掉了，拆掉了以后这来写成动态的啊，同样的item.image然后S2C这这一个冒号，那这个时候呢，我们来到项目里面看一下。

诶，这应该是什么？应该是个冒号啊，保存一下来好，那这边变利了没问题，是四个啊，但是大家看一下正常情况下啊，我们下面这显示的是不是应该第一个跟它是对应的，因为数组的第一个，那现在下面这很明显没有了，那这个为什么先显示的是三体，三体又是哪本书呢？来我们看一下，呃，第一本追分证人是不是没问题啊，我给大家把前四个收起来，你看第五个是三题，那也就是说我们进行了刚才计算的操作以后，你会发现books r少东西了，为什么会这样呢？那这个时候大家要理解数组的这个方法的特性。

第一个这个方法截取了返回的值，是不是就是它截取出来的内容，所以呢，Car是不是能变例啊，那第二点这个lie它呢是会干嘛，注意这个数组的lie方法是会修改我的元数组的啊，所以呢，在这儿如果说你不想让他修改怎么办？那你得你就不能辨离这个数组了，我们ES6里面学过3.63伏，对吧，把把它整进来，这是不是相当于是一个新的数组呀，那这个时候我们再来看，嗯，这时候就一致了，OK，在这呢，我们就完成了这个首页数据的动态展现，好我把这个视频停一下。