vue修改元素样式

BAtodl

墨衍会员 · AI 创作全网分发码龄7年

关注

原创最新推荐文章于 2026-06-06 11:33:28 发布 2.3w 阅读 AI 写同款· GEO 优化 ›

Vue 动态改变css样式的方法总结在网页开发中，我们经常会遇到动态的改变某个元素样式的需求，在vue里如何实现呢？官网上其实写的很详细了，对象语法，数组语法等。我自己总结了在开发中，个人用的比较多的三种方式。阅读详情

vue通过js动态修改元素的样式，如果是固定的几个样式，我常用的是绑定元素的calss,给不同的class写好需要的样式，js控制是否使用这个class。

但是最近遇到这么一个需求，文字可以让用户通过取色器选择不同的颜色，选择颜色后动态更新展示文字效果。
实现效果

这样获取到的颜色是一个很庞大的数据，根本不可能提前写好，也就是不能通过class的方式处理。那么怎样直接修改元素的style属性呢?

方法1—vue的v-bind指令

其实vue提供了绑定style属性的方法，并且和绑定class是写在一起的，但是，这么久以来我竟然一点印象也没有，也是很不可思议的一件事了。
这里给上vue绑定style的文档地址：https://cn.vuejs.org/v2/guide/class-and-style.html#对象语法-1
具体使用：

<template>
... 省略 ...
<el-row>
  <el-col :span="12">
    <el-form-item label="模板标题:" prop="titleName">
      <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
      </el-input>
    </el-form-item>
    
    <el-form-item label="标题颜色:">
      <!-- 取色器插件 -->
      <colorPicker v-model="titleColor"></colorPicker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="内容示例:" prop="" >
      <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
        <!-- v-bind缩写为":" -->
        <div :style="{color: titleColor}">{{searchForm.titleName}}</div>
      </div>
    </el-form-item>
  </el-col>
</el-row>
... 省略 ...
</template>

<script>
export default {
  data: () => {
    return {
      titleColor:'#000000',
      searchForm: {
        titleName: ''
      }
    }
  },
  methods: {}
}
</script>

使用v-bind绑定元素的style属性，js中连methods的部分都不用写了

方法2—js原生获取元素

这里的取色器插件可以绑定change事件，那么我们可以在取色器改变的时候取设置元素的style。
我首先想到的就是js原生的方法
具体使用：

<template>
... 省略 ...
<el-row>
  <el-col :span="12">
    <el-form-item label="模板标题:" prop="titleName">
      <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
      </el-input>
    </el-form-item>
    
    <el-form-item label="标题颜色:">
      <!-- 取色器绑定change事件 -->
      <colorPicker v-model="titleColor" @change="changeColor"></colorPicker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="内容示例:" prop="" >
      <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
        <!-- 给元素添加class,也可用id -->
        <div class="title-color">{{searchForm.titleName}}</div>
      </div>
    </el-form-item>
  </el-col>
</el-row>
... 省略 ...
</template>

<script>
export default {
  data: () => {
    return {
      titleColor:'#000000',
      searchForm: {
        titleName: ''
      }
    }
  },
  methods: {
    changeColor (val) {
      // 1. 这个取色器change事件直接获取的就是带"#"的十六进制颜色
      // 2. 如果用的是id，这里就换成js获取id的方法；如果vue中引入了jQuery，这里也可以用jQuery的方法
       document.getElementsByClassName('title-color')[0].style.color = val	
    }
  }
}
</script>

方法3 — vue的$refs属性获取元素

和方法2一样，通过取色器的change事件获取修改的颜色，但是在获取元素的时候不用原生而用vue的实例属性$refs。
vue 文档中提到，当ref在普通的DOM元素上使用，引用指向的就是DOM元素，因此我们可以用这点来获取我们要的元素。

vue $refs的文档：https://cn.vuejs.org/v2/api/#vm-refs
vue ref的文档：https://cn.vuejs.org/v2/api/#ref
具体使用：

<template>
... 省略 ...
<el-row>
  <el-col :span="12">
    <el-form-item label="模板标题:" prop="titleName">
      <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
      </el-input>
    </el-form-item>
    
    <el-form-item label="标题颜色:">
      <colorPicker v-model="titleColor" @change="changeColor"></colorPicker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="内容示例:" prop="" >
      <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
        <!-- 使用ref给元素注册引用信息 -->
        <div ref="titleNameRef">{{searchForm.titleName}}</div>
      </div>
    </el-form-item>
  </el-col>
</el-row>
... 省略 ...
</template>

<script>
export default {
  data: () => {
    return {
      titleColor:'#000000',
      searchForm: {
        titleName: ''
      }
    }
  },
  methods: {
    changeColor (val) {
      // 通过$ref来获取
      this.$refs.titleNameRef.style.color = val	
    }
  }
}
</script>