ul.for
    li.xunhuan(v-for='(v,index) in this.$store.state.Student.testList.questionList',:class='v.state').inline 第{{numberArr[index]}}題

data(){
    return {
        numberArr:["一","二","三","四","五","六","七","八","九","十"]
    }
},

效果 比如 第1個 改為 第一個

相當於 把index的1變為漢字一

******************************************華麗分割線******************************************

ReleaseTest(e) {
  // 釋出隨堂小測!
  this.testState = false;
  this.testTime = +e * 60;
  // this.testTime = +e;
  //擴充套件屬性state用來控制課堂測試的是否完成   本來沒有的，下面的程式碼是擴充套件一個state
  this.classhome.information.list[this.index].courseDataList[this.testIndex].state = true;
  console.log(this.classhome.information.list[this.index].courseDataList[this.testIndex]);
  this.wsurl.send(
    JSON.stringify({
      type: 0,
      courseDatatype: "隨堂小測",
      courseDataId: this.caseList.id,
      courseDataName: this.caseList.name,
      courseId: this.classhome.home.id,
      msg: e
    })
  );
 

******************************************華麗分割線******************************************

this.modal.name=this.modal.name.trim(); //trim() 去掉字元序列左邊和右邊的空格

******************************************華麗分割線******************************************

.line {
        width: 290px;
        margin-left: -10px;
        background-color: #E9EEF2;
        height: 1px;
        border: none;
 }
 

最近在寫專案的時候遇到一個地方需要將hr的顏色設定為紅色，

hr預設是一條灰色的一個畫素的;

首先想到的是color屬性，但是設定了並沒有用，因為color一般都是針對字型顏色的，線條需要用background-color；但是當我設定了background-color : red時，線條仍然是灰色的，所以我們需要給線條一個高度，也就是1px；此時hr是這樣的：

設定完後，在瀏覽器中可以看到原來的灰色還是存在的； 原來，hr是有預設的border的，我們需要將它的邊框去掉，設為border:none； 這樣就OK啦！

******************************************華麗分割線******************************************

 mounted() {
    document.getElementsByClassName("student")[0].style.background = "#5A616E";
}

destroyed() {
    document.getElementsByClassName("student")[0].style.background = "#FFF";
}

//解決在css樣式 對  類名為student 修改 background  無效  問題
// mounted(){} 載入後鉤子  用js獲取到 類名為student 設定他的  background  
// destroyed(){} 銷燬後鉤子 用js獲取到 類名為student 把他的  background 設定回去
// 這樣不影響其他元件的背景色 完美解決

******************************************華麗分割線******************************************

Vue生命週期中mounted和created的區別

https://blog.csdn.net/xdnloveme/article/details/78035065

******************************************華麗分割線******************************************

vue中引入第三方字型圖示庫iconfont，及iconfont引入彩色圖示

https://www.cnblogs.com/goloving/p/8855794.html

https://blog.csdn.net/qq_32113629/article/details/79740949

<template lang="pug">
div.bottom
  i.icon &#xe62d;
  svg.svg(aria-hidden="true")
    use.use(xlink:href="#icon-laoshi")
<template>

<style lang="stylus">
@font-face {
  font-family: 'iconfont'; /* project id 443803 */
  src: url('//at.alicdn.com/t/font_443803_vnkniczvjfn.eot');
  src: url('//at.alicdn.com/t/font_443803_vnkniczvjfn.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_443803_vnkniczvjfn.woff') format('woff'), url('//at.alicdn.com/t/font_443803_vnkniczvjfn.ttf') format('truetype'), url('//at.alicdn.com/t/font_443803_vnkniczvjfn.svg#iconfont') format('svg');
}

.bottom {
  height: 50px;

  .icon {
    font-family: 'iconfont' !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }

  .svg {
    width: 16px;
    height: 16px;

    .use {
    }
  }
}
<style>

*******************************************華麗分割線******************************************

預設只進行第一次匹配操作的替換，想要全域性替換，需要置上正則全域性標識g

span.endTime {{v.endTime.substr(0,9).replace(/-/g,'/')}}

******************************************華麗分割線******************************************

遍歷物件[{isTure:true},{isTure:true},{isTure:false},{isTure:false},]

for (let index = 0; index < this.data.xuanhuanData.length; index++) {
        console.log(111);
        console.log(this.data.xuanhuanData[index].isTrue);
        if (this.data.xuanhuanData[index].isTrue) {
          num++;
        }
      }

******************************************華麗分割線******************************************

解決方案，封裝 簽到框模組延時3秒消失函式
利用vue生命週期鉤子函式

updated() {
     // 當signText 的內容從  簽到 》 簽到成功  執行 簽到框模組延時3秒消失函式
    if(document.getElementsByClassName("signText")[0].innerHTML ==="簽到成功"){         
      this.SignInClose(); 
    }
},

updated() {}生命週期鉤子函式中資料已經更改完成

******************************************華麗分割線******************************************

WebSocketclose() {
      alert("你已經掉線，請重新連線！");
      this.$router.go(0); //重新整理網頁
}

WebSocket的事件觸發機制

https://blog.csdn.net/ll666634/article/details/79028930