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

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

<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的元素,

数据:

form: {

        name: "666",

        region: "shanghai",

      },

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

 changeValue(key) {

      this.datas[key] = true;

    },

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/799964.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

excel系列(二) - 利用 easypoi 快速实现 excel 文件导入导出

一、介绍 在上篇文章中&#xff0c;我们介绍了 apache poi 工具实现 excel 文件的导入导出。 本篇我们继续深入介绍另一款优秀的 excel 工具库&#xff1a;easypoi。 二、easypoi 以前的以前&#xff0c;有个大佬程序员&#xff0c;跳到一家公司之后就和业务人员聊上了&…

智慧水利:迈向水资源管理的新时代,结合物联网、云计算等先进技术,阐述智慧水利解决方案在提升水灾害防控能力、优化水资源配置中的关键作用

本文关键词&#xff1a;智慧水利、智慧水利工程、智慧水利发展前景、智慧水利技术、智慧水利信息化系统、智慧水利解决方案、数字水利和智慧水利、数字水利工程、数字水利建设、数字水利概念、人水和协、智慧水库、智慧水库管理平台、智慧水库建设方案、智慧水库解决方案、智慧…

LLM-阿里 DashVector + langchain self-querying retriever 优化 RAG 实践【Query 优化】

文章目录 前言self querying 简介代码实现总结 前言 现在比较流行的 RAG 检索就是通过大模型 embedding 算法将数据嵌入向量数据库中&#xff0c;然后在将用户的查询向量化&#xff0c;从向量数据库中召回相似性数据&#xff0c;构造成 context template, 放到 LLM 中进行查询…

HCIE是什么等级的证书?

HCIE&#xff08;华为认证互联网专家&#xff0c;Huawei Certified Internetwork Expert&#xff09;是华为认证体系中的最高等级证书。它要求考生具备在复杂网络环境中规划、设计、部署、运维和优化网络的能力。HCIE认证是华为认证体系中最具挑战性和含金量的认证之一&#xf…

MWA(Modern Web App)初学那些事-2-Basic HTML CSS

初学MWA(Modern Web App&#xff09;那些事-2-Basic HTML & CSS 目录 初学MWA(Modern Web App&#xff09;那些事-2-Basic HTML & CSS前言一、本节学习目标二、HTML基础内容2.1关键元素2.4 Scripts 三、CSS 基础内容3.1 级联样式表-用于设置网页样式和布局3.2 CSS规则语…

cuda缓存示意图

一、定义 cuda 缓存示意图gpu 架构示意图gpu 内存访问示意图 二、实现 cuda 缓存示意图 DRAM: 通常指的是GPU的显存&#xff0c;位于GPU芯片外部&#xff0c;通过某种接口&#xff08;如PCIE&#xff09;与GPU芯片相连。它是GPU访问的主要数据存储区域&#xff0c;用于存储大…

Day53:图论 岛屿数量 岛屿的最大面积

99. 岛屿数量 时间限制&#xff1a;1.000S 空间限制&#xff1a;256MB 题目描述 给定一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的矩阵&#xff0c;你需要计算岛屿的数量。岛屿由水平方向或垂直方向上相邻的陆地连接而成&#xff0c;并且四周…

IP地址与物理地址:网络通信的基础详解

在学习网络通信时&#xff0c;理解IP地址与物理地址&#xff08;也称为硬件地址&#xff09;的区别至关重要。这篇文章将为你解答这些基本概念&#xff0c;并帮助你更好地掌握网络通信的基础。 什么是IP地址和物理地址&#xff1f; IP地址是网络层的逻辑地址&#xff0c;用于标…

《书生大模型实战营第3期》入门岛 学习笔记与作业:Linux 基础知识

文章大纲 Linux 系统简介系统简介为啥正儿八经的深度学习都用 Linux&#xff1f; Linux 基础命令3.1 文件管理3.2 进程管理3.3 工具使用 LinuxInternStudio1. InternStudio开发机介绍2. SSH及端口映射2.1 什么是SSH&#xff1f;2.2 如何使用SSH远程连接开发机&#xff1f;2.2.1…

VUE前端HTML静默打印(不弹出打印对话框)PDF简单方案

前言 在做打印功能的时候&#xff0c;以前大部分客户端都是用C#做的&#xff0c;静默打印&#xff08;也就是不弹出打印对话框&#xff09;比较简单。 但是使用浏览器作为客户端&#xff0c;静默打印&#xff08;也就是不弹出打印对话框&#xff09;做起来就比较困难。困难的…

Mac Dock栏多屏幕漂移固定的方式

记录一下 我目前的版本是 14.5 多个屏幕&#xff0c;Dock栏切换的方式&#xff1a; 把鼠标移动到屏幕的中间的下方区域&#xff0c;触到边边之后&#xff0c;继续往下移&#xff0c;就能把Dock栏固定到当前屏幕了。

教学原则及方法

直观性原则 启发性原则 循序渐进性原则 巩固性原则 量力性原则 思想性与科学性相统一原则 理论联系实际原则 因材施教原则

【学习笔记】3GPP支持无人机的关键技术以及场景-3GPP TS 22.125技术报告

目录 引言 1 范围 2 引用 3 定义、符号和缩写 4 UAS概述 5 无人机系统&#xff08;UAS&#xff09;远程识别要求 6 无人机使用要求 引言 这份文件是3GPP TS 22.125 V19.2.0&#xff0c;主要定义了3GPP系统对无人飞行器&#xff08;UAV&#xff09;及其系统&#xff08;U…

决策树(ID3,C4.5,C5.0,CART算法)以及条件推理决策树R语言实现

### 10.2.1 ID3算法基本原理 ### mtcars2 <- within(mtcars[,c(cyl,vs,am,gear)], {am <- factor(am, labels c("automatic", "manual"))vs <- factor(vs, labels c("V", "S"))cyl <- ordered(cyl)gear <- ordered…

神经网络替代密度泛函理论!清华研究组发布通用材料模型 DeepH,实现超精准预测

在材料设计中&#xff0c;了解其电子结构与性质是预测材料性能、发现新材料、优化材料性能的关键。过去&#xff0c;业界广泛使用密度泛函理论 (DFT) 来研究材料电子结构和性质&#xff0c;其实质是将电子密度作为分子&#xff08;原子&#xff09;基态中所有信息的载体&#x…

Java基础及进阶

JAVA特性 基础语法 一、Java程序的命令行工具 二、final、finally、finalize 三、继承 class 父类 { //代码 }class 子类 extends 父类 { //代码 }四、Vector、ArrayList、LinkedList 五、原始数据类型和包装类 六、接口和抽象类 JAVA进阶 Java引用队列 Object counter ne…

AutoHotKey自动热键(十一)下载SciTE4AutoHotkey-Plus的中文增强版脚本编辑器

关于AutoHotkey的专用编辑器, SciTE4AutoHotkey是一个免费的基于 SciTE 的 AutoHotkey 脚本编辑器,除了 DBGp 支持, 它还为 AutoHotkey 提供了语法高亮, 调用提示, 参数信息和自动完成, 以及其他拥有的编辑特性和辅助工具.XDebugClient 是一个基于 .NET Framework 2.0 的简单开…

论文翻译:通过云计算对联网多智能体系统进行预测控制

通过云计算对联网多智能体系统进行预测控制 文章目录 通过云计算对联网多智能体系统进行预测控制摘要前言通过云计算实现联网的多智能体控制系统网络化多智能体系统的云预测控制器设计云预测控制系统的稳定性和一致性分析例子结论 摘要 本文研究了基于云计算的网络化多智能体预…

PNPM 高效入门:安装配置一本通

PNPM高效入门&#xff1a;安装配置一本通 引言Pnpm 简介安装 PNPM全局安装&#xff08;推荐&#xff09;使用 nvm&#xff08;Node Version Manager&#xff09; 配置PNPM使用PNPM管理项目初始化项目 添加依赖快速安装所有依赖查看安装的包 优化与故障排除PNPM与持续集成/持续部…

Nest.js 实战 (一):使用过滤器优雅地统一处理响应体

前言 在我们实际的业务开发中&#xff0c;我们可以看到后端接口返回格式都有一定的要求&#xff0c;假如我们统一规定接口的统一返回格式为&#xff1a; {data: any; // 业务数据code: number; // 状态码msg: string; // 响应信息timestamp: number; // 时间戳 }那么在 Nest.…