vue组件动态样式属性

最新推荐文章于 2023-04-19 11:15:52 发布

久..

最新推荐文章于 2023-04-19 11:15:52 发布

阅读量824

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/class_zy/article/details/112169127

本文探讨了如何在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);
}