技術標籤：vue

1.在標籤行內動態繫結style.class,style可以繫結其中一個樣式,class可以更換整個class

//html
<div class="zy-select" @click="chooseSelect" :style="newStyle">
//<div class="zy-select" @click="chooseSelect" :style=" { width:newWidth } ">
//可以通過給繫結style直接定義屬性,也可以給style繫結方法,放在監聽屬性中通過返回'--new-width'這種形式定義.在css中通過var定義--new-width,可以使用props中傳入的屬性資料.
 

    <div class="box">
      <input class="zy-input">
      <b :class= "zySelect"><i class="bottom-arrow1"></i><i class="bottom-arrow2"></i></b>
    </div>
    <div>
//js
 props: {
    newWidth: {
 

      type: String,
      default: '100px'
    }
  },
  data() {
    return {
      zySelect: 'bottom'
    }
  },
  computed:{
    newStyle() {
      return {
        '--new-width':this.newWidth
      }
    }
  },
  methods:{
    chooseSelect() {
      this.zySelect = 'bottom-up'

    }
  }
// css

.zy-
 
select {
width: var(--new-width);
}

.box {
  height: 30px;
  border: 1px solid #39cd81;
  border-radius: 5px;
  position: relative;
}

.zy-input {
  position: absolute;
  top: 0;
  left: 2%;
  width: 60%;
  height: 90%;
  border: 0;
  outline: none;
}

.bottom {
  position: absolute;
  right: 20px;
  top: 39%;
}

.bottom-up {
  position: absolute;
  right: 20px;
  top: 64%;
  transform: rotateX(180deg);
}