默认数据是这样,如果更改了其中一个,文本框变成红色
<el-form-item label="Activity name">
<el-input
v-model="form.name"
v-highlight="datas['name']"
@input="changeValue('name')"
/>
</el-form-item>
<el-form-item label="Activity zone">
<el-select
v-model="form.region"
v-highlight="datas['region']"
placeholder="please select your zone"
@change="changeValue('region')"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
v-highlight="datas['name']"
@input="changeValue('name')"
需要改变的item加入这2句话
import Vue from "vue";
Vue.directive("highlight", {
update: function (el, binding) {
const classname = el.getAttribute("class");
const elRef =
classname == "el-input" ? el.children[0] : el.children[0].children[0];
if (binding.value !== binding.oldValue) {
elRef.style.color = binding.value ? "red" : "";
}
},
});
el.children[0] :和el.children[0].children[0]主要目的是找到input的元素,
数据:
form: {
name: "666",
region: "shanghai",
},
datas: { name: false, region: false },
changeValue(key) {
this.datas[key] = true;
},
讲当前更改的数据变成true即可