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