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

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

html 复制代码
<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句话

javascript 复制代码
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.children0 :和el.children0.children0主要目的是找到input的元素,

数据:

form: {

name: "666",

region: "shanghai",

},

datas: { name: false, region: false },

changeValue(key) {

this.dataskey = true;

},

讲当前更改的数据变成true即可

相关推荐
kyriewen2 分钟前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
OpsEye6 分钟前
同一套用例跑两个大模型接口,差异到底出在哪
javascript·ai编程
X1A0RAN1 小时前
PPT 图片批量处理教程:导出全部幻灯片 · 提取全部素材
开发语言·javascript·powerpoint
量化分析码农2 小时前
股票历史数据的复权参数对照:多级别返回的字段与数值差异
java·javascript·后端
ruanno_top4 小时前
给标签页加 roving tabindex,整组反而键盘进不去了
vue.js
天才熊猫君4 小时前
给 Vue 的 reactive 套 Proxy,为什么响应式会失灵?
前端·javascript
仨孩子的爹4 小时前
CSS打印样式:字体族与行高在纸上的对照实测
vue.js
用户2763965765106 小时前
放弃 JWT 后,我给 FastAPI 游戏服务端手撸了一套 token session
javascript
用户84298142418107 小时前
从 JavaScript 到可运行的字节码 - ByteJS 使用指南
javascript
OpenTiny社区7 小时前
AI Agent场景组件库 TinyRobot v1.0 正式发布:一站式打造您的AI助手
vue.js·github