vue实用技巧

Mr.wang

发布于：2020年3月19日

vue使用过程的实用技巧

记录vue使用过程的实用技巧

浏览器控制台调试数据

window.vue = this
//页面显示
 process.env.NODE_ENV === "development"?Vue.prototype.$log = window.console.log:'';
// 组件内部
<div>{{$log(info)}}</div>

Vue中对于style属性和class属性的使用

//正常
<div style="width:100px">
    style
</div>
//骚操作
//对象写法
<div :style="{width:'200px','text-align':center,color: activeColor, fontSize: fontSize + 'px',color:(index==0?arr.conFontColor:'#000')}">
</div>
<div :class="{ active: isActive, 'text-danger': hasError, active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal' }">
</div>
//切换样式写法
<div :class="isActive == true ? 'isFixed' :''"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<div :class="[{ active: isActive }, errorClass]"></div>
//数组语法
<div :style="[{width:'100px','text-align':center, fontSize: 100 + 'px',color:(index==0?arr.conFontColor:'#000')},{width:'200px','text-align':center,color: activeColor, fontSize: fontSize + 'px',color:(index==0?arr.conFontColor:'#000')}]">
    style
</div>
//一个属性多个值时
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}
data: {
  isActive: true,
  hasError: false
}

vue中对watch的利用

watch: {
  "planForm.number": function(newVal, oldVal) {
    // 解决数字键盘可以输入输入多个小数点问题
    if (newVal == "" && oldVal.toString().indexOf(".") > 0) {
      this.planForm.number = oldVal;
      return;
    }
    // 保留两位小数
    if (newVal) {
      newVal = newVal.toString();
      var pointIndex = newVal.indexOf(".");
      //不出现两位小数点
      if (newVal.toString().lastIndexOf(".") > pointIndex) {
        this.planForm.number = oldVal;
        return;
      }
      if (pointIndex > 0 && newVal.length - pointIndex > 3) {
        this.planForm.number = oldVal;
        return;
      }
    }
  }
},