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

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

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

相关推荐
柒和远方几秒前
LeetCode 139. 单词拆分 —— 从暴力回溯到 DP 完全背包
javascript·python·算法
用户2930750976691 分钟前
流式输出:Vue 3 + DeepSeek API 实战
vue.js
先吃饱再说4 分钟前
流式输出完全指南:让 AI 对话像打字机一样流畅
javascript·vue.js
এ慕ོ冬℘゜1 小时前
原生 JS 实现自定义单选日历组件(无 UI 库、纯手写、禁用过去日期)
开发语言·javascript·ui
mONESY2 小时前
Skill 技能与 MCP 协议的底层逻辑与协同真相
javascript
南川琼语3 小时前
HTTP——AJAX
前端·javascript·ajax
不简说3 小时前
JS 代码技巧 vol.2 — 20 个数组/对象/字符串/正则的实用技巧
前端·javascript·面试
小小编程路4 小时前
C++ 块作用域详解:从基础到实战
前端·javascript·vue.js
虚惊一场4 小时前
MarkView:纯前端 Markdown 实时预览工具的架构设计
前端·javascript·vue.js
冰暮流星4 小时前
javascript之对象的继承
javascript