默认数据是这样,如果更改了其中一个,文本框变成红色
<el-form-item label="Activity name"><el-inputv-model="form.name"v-highlight="datas['name']"@input="changeValue('name')"/></el-form-item><el-form-item label="Activity zone"><el-selectv-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即可