当前位置: 首页> 文旅> 美景 > 指令判断数据更改,文本变色

指令判断数据更改,文本变色

时间:2025/7/14 1:25:29来源:https://blog.csdn.net/ae_pppppp/article/details/140441945 浏览次数:0次

默认数据是这样,如果更改了其中一个,文本框变成红色

<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即可

关键字:指令判断数据更改,文本变色

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: