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>