VUE小知识点总结

一、样式控制

1、:style 与 :class 三元运算符使用

//style三元表达式
<p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p>
<i class="iconfont iconjiantou-copy-copy" :style="{'transform': (isShow ? 'rotate(180deg)':'rotate(0deg)')}"></i> //通过判断isShow来确定图标的旋转角度
//class三元表达式
<i class="iconfont "  :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>

<button :class="{'on':(beizhu || checkImgList.length>0 || checkImgList.length>0)}">提交</button>

2、通过:style/:href改background-image的值/地址

局部：class="icon" :style="{backgroundImage:'url(' + item.videopic + ')'}"

  完整：<div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"></div>

<a class="listOne" :href="item.targetUrl" v-for="(item,index) in categoryHotOne" :key="index">

二、本地存储

 

1、sessionStorage
//获取医生id缓存到本地，在症状描述使用
window.sessionStorage.giveDoctorId = this.doctorId;
//无就诊人 获取红缓存的医生id
this.doctorId=window.sessionStorage.giveDoctorId;

2、localStorage
//存
localStorage.setItem("updatePatId", _this.jzrinfo.id);
//取
if (localStorage.getItem("updatePatId")) {
    this.updatePatId = localStorage.getItem("updatePatId") || 0;
}
//清除
if (localStorage.getItem("updatePatId")) {
    //如果localStorage里边有病历信息的就诊人id，就清除掉
    localStorage.removeItem("updatePatId");
}

三、路由跳转

this.$router.push(`/doctorIndex?tab=1&id=${_this.doctorId}&patientId=${_this.patientId}`);

　<div v-if="search" :class="search" @click="$router.push('/Search')"></div>

<div  @click="$router.push(`/orderDetail?orderNo=${item.orderNo}`)"></div>