写代码的记录3

以下方法很多都是从网络上各处搬运学习，自己记录一下方便日后使用

一、el-input里添加键盘监听事按下enter进行登陆

1.html里的代码

<el-input @keyup.enter.native="addByEnterKey"></el-input>

2.js代码

  addByEnterKey(e) {
      //Enter键的代码就是13
      if (e.keyCode == 13) {
        this.login();
      }
    },

二、控制循环次数

需求：莫文蔚 / 郭一凡  名字大于等于两个时在名字后加 / 且最后一个名字不加，名字只有一个时不加。

1.将 /(istwoname)定义到data里

 data() {
    return {
      istwoname: "/",
    };

2.在html里用三元表达式判断，名字长度不为1时加，其余不加

 <span
                v-if="index < item.a.song.artists.length - 1"
                :istwoname="
                  item.a.song.artists.length !== 1
                    ? (istwoname = '/')
                    : (istwoname = '')
                "
                >{{ istwoname }}</span
              >

3.名字是循环出来的，每循环一次每个名字后面加个istwoname,控制istwoname最后少循环一次

 <span
              v-for="(itemart, index) in item.a.song.artists"
              :key="index"
              class="artsty"
              >{{ itemart.name }}
              <span
                v-if="index < item.a.song.artists.length - 1"
                :istwoname="
                  item.a.song.artists.length !== 1
                    ? (istwoname = '/')
                    : (istwoname = '')
                "
                >{{ istwoname }}</span
              >
            </span>

关键代码：<后面的num可控制循环的次数

v-if="index < item.a.song.artists.length - 1"
v-if="index < 5"

三、created 和 mounted 的区别

注：自己还需详细了解所有生命周期函数

created：

在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

mounted：

实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick

四、从多个路由跳转到同一个页面，页面的样式相同，不同数据渲染的name pic url 不同。

1.写出页面基本样式，并且在data里定义好页面需要的数据

 data() {
    return {
      // 从后端获取的歌曲的url
      songurl: [],
      // 要播放的歌单的数据存储在数组里，包括歌曲的name 图片的pic 歌曲id等
      newArr: [],
      // 从第几首歌过来，并且通过index控制上一首下一首
      index: "",
      // 通过获取的id来取得歌曲url
      id: [],
    };
  },

2.在creatd里接收上一个页面通过route传递过来的数据

 // 从每日推荐来
    var isgetdailysongs = this.$route.query.isgetdailysongs;
    var index = this.$route.query.index;
    this.isgetdailysongs = isgetdailysongs;
    this.index = index;

    // 从歌单来
    var ispalyall = this.$route.query.ispalyall;
    var iscomesonglist = this.$route.query.iscomesonglist;
    this.ispalyall = ispalyall;
    this.iscomesonglist = iscomesonglist;
    var id = localStorage.getItem("id");
    this.id = id;

这里在上个页面传递值的时候定义了一个isgetdailysongs和iscomesonglist让我用来判断是从哪个页面来继而调用不同的接口

3.在mounted里调用不同接口（从不同页面来调用接口不同，获取不同数据）

 mounted() {
    // 每日推荐
    if (this.isgetdailysongs == 1) {
      this.isgetdailysong();
    }
    // 歌单
    if (this.iscomesonglist == 2) {
      this.getsonglist();
      this.palyall();
    }
  },