current position:Home>Vue class & Style binding and computed

Vue class & Style binding and computed

2022-04-29 15:13:16Elephants and ants

1. class binding

<div :class="['el-notification', customClass, horizontalClass]"
</div>
    computed: {
    
      typeClass() {
    
        return this.type && typeMap[this.type] ? `el-icon-${
       typeMap[this.type] }` : '';
      },

      horizontalClass() {
    
        return this.position.indexOf('right') > -1 ? 'right' : 'left';
      },
     }

2. style binding

<div
      :class="['el-notification', customClass, horizontalClass]"
      v-show="visible"
      :style="positionStyle"
      @mouseenter="clearTimer()"
      @mouseleave="startTimer()"
      @click="click"
      role="alert"
    >
 </div>

  computed: {
     
        positionStyle() {
    
        return {
    
          [this.verticalProperty]: `${
       this.verticalOffset }px`
        };
      }
  }
    

copyright notice
author[Elephants and ants],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291513145928.html

Random recommended