默认数据是这样,如果更改了其中一个,文本框变成红色
<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的元素,