工作日志总结

 

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.youkuaiyun.com/xdnloveme/article/details/78035065

 

******************************************华丽分割线******************************************

 

vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标

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

https://blog.youkuaiyun.com/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.youkuaiyun.com/ll666634/article/details/79028930