vue组件动态样式属性

本文探讨了如何在Vue组件中实现动态样式属性的绑定,包括使用`style`属性来绑定特定样式,以及利用`class`属性来切换不同的CSS类,从而实现组件样式的动态变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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);
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值