韦德国际1946英国 > 计算机网络 > 计算机网络:从零开始利用vue,vue对storejs获取的

原标题:计算机网络:从零开始利用vue,vue对storejs获取的

浏览次数:198 时间:2019-08-03

亚洲城ca88手机网页版 ,总结

vue对storejs获取的数目开始展览管理时蒙受的两种难题总计,vuestorejs

切切实实代码如下所示:

export default {
  data(){
    return {
      shopList:{},
      isEmpty:false, //判断购物车中是否有存在内容
    }
  },
  created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //对数据处理 将商店中名中的地址分离出来
      this.shopList = store.get('shopCar');
      console.log(this.shopList)
    }
  }  
}    

以此时候打字与印刷出来:

this.shopList 展现的结果为 {ob: Observer}

固然可以在vue中央直属机关接利用如下:

<ul>
  <li v-for = "list in shopList" :key = "list.id">
    {{list}}
  </li>
</ul>

但是只要此时本身想对this.shopList中的数据开始展览管理,就能够现出难题,此时假如你想遍历循环该数额,就能够并发奇异的作用,因为那时候打印 this.shopList.length 展现出来的结果为undefined。

遍历对象有两种格局:

1,最常用的 for循环 ,但那时length为undefined,该措施不可用;

2,for in 同上原因不可使用

  1. jquery中也可以有遍历对象的法子 $.each(this.shopList,function(n,i){})

您会发先第三种能够遍历那些数额,那么就能够达成数量的处理了。

不过只要您的this.shopList这一个指标中又包括了一层对象呢?.each()中再满含一层.each()中再满含一层.each(),不就能够缓和这种主题材料了吧?除了这种艺术外,有种越来越好的办法:

created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //对数据处理 将商店中名中的地址分离出来
      var shopList = store.get('shopCar')
      $.each(shopList,function(n,i){
        //处理数据。。。。。
      })
      this.shopList = shopList;
      console.log(this.shopList)
    }
  }

更简约直接的措施是,将数据先赋值给多少个变量,将数据管理为您想要的格式之后,再复制给this.shopList就可以。

为啥我们一贯将数据赋值给this.shopList就不得以对数据举行拍卖了吧?

缘由是当您将数据赋值给this.shopList,即落实了vue的数码的双向绑定。

总结

如上所述是作者给大家介绍的vue对storejs获取的数量开始展览拍卖时遇上的三种难点计算,希望对咱们具备扶助,即使我们有其余疑问请给自家留言,小编会及时回复我们的。在此也极其谢谢大家对帮客之家网址的帮忙!

具体代码如下所示: export default { data(){ return { shopList:{}, isEmpty:false, //决断...

地点MainPage.vue的代码图中还应该有router-link标签,能够见到其to属性是一个指标,重要达成了向其跳转的机件传递数值功用。path表示跳转路线,query把music对象作为品质传递了过去,这里跳转的地方为"/PlayMusic",在PlayMusic.vue中定义music对象数据,况且在created阶段采用“this.music

this.$route.query.music”获取music对象,赋值给自个儿的music对象然后绑定在页面。

2、在播放页面彰显歌词

最后效果如下:

计算机网络 1

因为歌词数据大幅,不可能通过json模拟,所以在尚未后台以及数据库的图景下,作者的解决办法是将歌词保存为txt文件,通过ajax发送央求读取,实今世码如下:

计算机网络 2

<ul>
  <li v-for = "list in shopList" :key = "list.id">
    {{list}}
  </li>
</ul>

计算机网络 3

2,for in 同上原因不可选择

计算机网络 4

export default {
  data(){
    return {
      shopList:{},
      isEmpty:false, //判断购物车中是否有存在内容
    }
  },
  created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //对数据处理 将商店中名中的地址分离出来
      this.shopList = store.get('shopCar');
      console.log(this.shopList)
    }
  }  
}    

在dev-server.js中先把乞求到的json函数(appData)复制一份给musicCopy数组,因为8首曲目为专擅变化的,所以为了不生成重复的曲目,将选择复制数组举办判定。决断方法主要思路是反省每便随机生成的曲目所对应的copy数组中的值是或不是为undefined,否的话代表在此以前未有变化过该曲目,把曲目赋值给music数组,并且把copy数组的对应地点值赋值为undefined。是的话代表早就生成过该曲目,由此i-1再一次随机生成曲目。

你会发先第两种能够遍历这一个数据,那么就足以兑现数量的拍卖了。

1、利用router-link在组件之间传递数据

怎么大家向来将数据赋值给this.shopList就不得以对数码举行拍卖了吧?

ul作为承载8个曲指标沙盘,利用v-for="music in musics"遍历musics数组,依次生成li标签填充页面。musics为三个对象数组,其内容是8个目的,具体贯彻如下图所示:

  1. jquery中也许有遍历对象的方法 $.each(this.shopList,function(n,i){})

上海体育场面是在PlayMusic.vue的created阶段,也正是用户点击MainPage.vue页面包车型客车歌曲封面时候跳转进去。这里先猎取了music对象:“this.music

this.$route.query.music”,然后拿走lyric的门路,json数据中的lyric是歌词txt文件寄放的路线,如"lyric":"/static/data/lyric/一番の宝物(Original Version).txt".然后新建了XMLHttpRequest对象(这里未有做合营)並且发送ajax须要,把重返值xhr.responseText赋值给lyr,因为再次来到值是叁个字符串,所以映未来页面上不会有换行效果。这里用正则表明式相称全数的换行符,将其替换为HTML能识别的<br />换行,最终赋值给歌词div。这里还要注意一点便是txt文件保留为UTF-8编码,不然会乱码。

下一篇就要完结的是歌曲的播放效果。

 

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:计算机网络:从零开始利用vue,vue对storejs获取的

关键词: 前端 Vue vue-cli node.js npm

上一篇:计算机网络:HTML5游戏开发实战

下一篇:没有了