vue3<script setup>自定义指令

 main.ts

// 自定义指令
app.directive('color',(el,binding) => {el.style.color = binding.value
})
  • 这段代码定义了一个名为color的自定义指令,并将其注册到Vue应用实例app上。
  • 自定义指令接收两个参数:elbindingel是绑定指令的元素,而binding是一个包含指令信息的对象,比如指令的值(value)、参数(arg)、修饰符(modifiers)等。
  • 在这个自定义指令中,直接修改了元素elstyle.color属性,将其设置为binding.value,即指令绑定的值。由于color是响应式的,并且与指令绑定,因此当color的值变化时,元素的颜色也会自动更新。

html

<div v-color="color" @click="color = 'red'">自定义指令 
</div>
  • v-color="color": 这里使用了自定义指令v-color,并将其值绑定到Vue组件中的color响应式引用上。这个指令的作用是将元素的文本颜色设置为color变量的值。
  • @click="color = 'red'": 这是一个事件监听器,当点击这个div元素时,会将color变量的值更改为'red'。由于color是响应式的,这种变化会自动触发Vue的更新机制,从而更新页面上绑定了color的元素。

js

<script lang="ts" setup>
import { ref } from 'vue'let color = ref('orange')</script>
  • <script lang="ts" setup>: 这是Vue 3 Composition API的语法糖,允许你在<script>标签内使用TypeScript编写Vue组件,并且可以直接使用从vue导入的Composition API函数(如ref),而不需要在组件的setup函数中显式地定义它们。
  • import { ref } from 'vue': 从vue包中导入ref函数,用于创建一个响应式的引用。
  • let color = ref('orange'): 使用ref函数创建一个响应式的引用color,并初始化为'orange'。这个引用可以被Vue组件的模板和Composition API的其他部分访问和修改。

        

自定义指令 | Vue.js (vuejs.org)

示例:封装数据加载中提示(v-loading)

main.ts

// 自定义指令 
app.directive('loading',(el,binding) => {binding.value ? el.classList.add('loading') : el.classList.remove('loading')
})

html

  <!-- 自定义指令 --><div v-loading="isLoading">加载完成</div>

js

let isLoading = ref(true)

css(全局使用可放入main.css中,父级元素记得使用绝对定位:position: relative;)

.loading::before {content: '加载中';font-size: 100px;font-weight: 600;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: pink;
}

        

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu22.04安装NIVIDIA显卡驱动总结

1.首先在安装驱动时需要判断系统有无GPU以及GPU的型号 可以参考这篇文章&#xff1a; https://blog.51cto.com/u_13171517/8814753#:~:textubuntu%20%E7%B3%BB%E7%BB%9F%20%E6%80%8E%E4%B9%88%E5%88%A4%E6%96%AD%E7%B3%BB%E7%BB%9F%E6%9C%89%E6%B2%A1%E6%9C%89GPU%201%20%E6%…

【C++】函数重载详解

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…

【LLM大模型】Langchain 介绍与入门

官方介绍 LangChain 是一个利用LLM开发应用程序的框架。它让应用程序具备&#xff1a; 上下文感知能力&#xff1a;将LLM连接到上下文源&#xff08;提示说明、少量示例、用以形成其响应的内容等&#xff09;推理&#xff1a;依靠LLM进行推理&#xff08;例如根据提供的上下文…

全网最详细单细胞保姆级分析教程

各位读者,好久不见,我又归来了,之后的一段时候我将以Rstudio分析单细胞的RNA-seq流程为主,希望各位读者朋友多多支持! 1. pbmc单样本分析 1.包的加载 library(multtest) library(dplyr) library(Seurat) library(patchwork) library(R.utils)2. 清除环境变量 rm(list ls))…

深度解析蚂蚁 SEO 蜘蛛池:提升网站流量的有效利器

在当今数字化时代&#xff0c;网站流量对于企业和个人的在线业务成功至关重要。为了在竞争激烈的网络环境中脱颖而出&#xff0c;众多站长和 SEO 从业者不断探索各种优化策略&#xff0c;其中蚂蚁 SEO 的蜘蛛池成为备受关注的工具之一。 蚂蚁 SEO 蜘蛛池是一种创新的技术手段&a…

HarmonyOS鸿蒙开发入门 , ArkTS语言的了解

鸿蒙&#xff08;即HarmonyOS&#xff0c;开发代号Ark&#xff0c;正式名称为华为终端鸿蒙智能设备操作系统软件&#xff09;是由华为公司2012年以来开发的分布式操作系统&#xff0c;并于2019年8月正式发布。该系统利用“分布式”技术&#xff0c;将手机、电脑、平板、电视、汽…

画封装步骤

parameter参数 1.打开pad designer 2.设计单位mils改为millimeter&#xff0c;保留decimal layers 3.勾选☑️single layer mode

游戏厅ps5体验馆计时收费软件 佳易王电玩馆计时器定时语音提醒系统操作教程

前言&#xff1a; 游戏厅ps5体验馆计时收费软件 佳易王电玩馆计时器定时语音提醒系统操作教程 以下软件操作教程以&#xff0c;佳易王游戏厅电玩店计时计费管理系统软件为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 一、软件操作教程 1、计…

【Python】人生重开模拟器(实现代码)

一、游戏背景介绍 这是一款文字类小游戏。玩家输入角色的初始属性之后&#xff0c;就可以开启不同的人生经历。 完整的程序代码较多&#xff0c;此这里只实现其中的一部分逻辑&#xff08;主要目的&#xff1a;巩固前面学习的 Python 语法基础&#xff09;。 二、设置初始属性…

springboot企业人力资源管理系统-计算机毕业设计源码29005

目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1系统开发流程 2.2.2 用户登录流程 2.2.3 系统操作流程 2.2.4 添加信息流程 2.2.5 修改信息流程 2.2.6 删除信息流程 2.3 系统功能…

Redis 主从复制,哨兵与集群

目录 一.redis主从复制 1.redis 主从复制架构 2.主从复制特点 3.主从复制的基本原理 4.命令行配置 5.实现主从复制 6.删除主从复制 7.主从复制故障恢复 8.主从复制完整过程 9.主从同步优化配置 二.哨兵模式&#xff08;Sentinel&#xff09; 1.主要组件和概念 2.哨…

基于复旦微V7 690T FPGA +ARM/海光X86+AI的全国产化数据采集人工智能平台

国产化FPGA&#xff1a;JFM7VX690T80主机接口&#xff1a;PCIe Gen3 x88Gbps/lane光纤通道&#xff1a;前面板4路SFP光纤&#xff0c;后面板1路QSFP光纤2组独立的DDR3 SDRAM 缓存&#xff0c;工作时钟频率800MHz2个FMC接口扩展&#xff1a;每个支持16路GTH&#xff0c;线速率10…

提示词工程(Prompt Engineering)是什么?

一、定义 Prompt Engineering 提示词工程&#xff08;Prompt Engineering&#xff09;是一项通过优化提示词&#xff08;Prompt&#xff09;和生成策略&#xff0c;从而获得更好的模型返回结果的工程技术。 二、System message 系统指令 System message可以被广泛应用在&am…

ORB-slam3 安装教程

1. 官网下载源码&#xff1a;GitHub - UZ-SLAMLab/ORB_SLAM3: ORB-SLAM3: An Accurate Open-Source Library for Visual, Visual-Inertial and Multi-Map SLAM 2. 根据官网下载依赖&#xff1a; &#xff08;1&#xff09;eigen3:Eigen 解压后进入源码目录进行编译&#xff1a…

ensp实验:防火墙安全策略用户认证综合策略

实验要求&#xff1a; 示例图&#xff1a; 设备配置&#xff1a; LSW5 vlan配置&#xff1a; 防火墙网络配置&#xff1a; 安全区域配置&#xff1a; 地址组配置&#xff1a; 时钟配置: 一&#xff1a; 办公区策略&#xff1a; 生产区策略&#xff1a; 二&#xff1a; 游客区…

医院健康宣教二维码如何制作?以及应用案例分享

医院正在广泛应用二维码来向患者展示健康宣传教育方面的信息&#xff0c;从疾病预防内容、术后康复训练知识&#xff0c;到日常保健视频&#xff08;如八段锦&#xff09;、饮食注意事项…… 这些内容都能够以二维码的形式呈现&#xff0c;方便患者随时扫码查看获取健康知识&am…

plt.subplot2grid创建N行M列的子图网格,N不等于M

以下代码是实现不同频率的余弦信号绘制&#xff0c;并将它们显示在一个 3x2 的子图网格中。 import numpy as np import matplotlib.pyplot as pltfig plt.figure(figsize(10, 10)) a1 plt.subplot2grid((3, 2), (0, 0), colspan2) a2 plt.subplot2grid((3, 2), (1, 0)) a3…

C++技能基础:提升C++程序运行效率的方法总结

以下是一些编程方面的建议&#xff0c;目的是为了提升C程序的效率&#xff08;这里的效率以时间为评判标准&#xff09;&#xff0c;欢迎指正和补充 场景&#xff1a;当设计方法时&#xff0c;将方法设计成值传递还是引用或者指针传递建议&#xff1a;当变量所占内存大小与指针…

SpringBoot整合XXL_JOB示例

XXL-JOB 是一个分布式任务调度平台&#xff0c;主要用于管理和执行定时任务。它适用于各种场景&#xff0c;例如定时任务、批处理任务、分布式任务等。XXL-JOB 提供了丰富的功能&#xff0c;使得任务调度变得简单、高效和可靠。以下是 XXL-JOB 的一些主要功能和特点&#xff1a…

暑假第一次作业

第一步&#xff1a;给R1,R2,R3,R4配IP [R1-GigabitEthernet0/0/0]ip address 192.168.1.1 24 [R1-Serial4/0/0]ip address 15.0.0.1 24 [R2-GigabitEthernet0/0/0]ip address 192.168.2.1 24 [R2-Serial4/0/0]ip address 25.0.0.1 24 [R3-GigabitEthernet0/0/0]ip address 192.…