当前位置: 首页 > news >正文

关于 vue3 模板引用

文章目录

  • 前言
  • 1.访问模板引用
  • 2.v-for中的模板引用
  • 3.组件上的ref


前言

如果我们需要直接访问组件中的底层DOM元素,可使用vue提供特殊的ref属性来访问


1.访问模板引用

  1. 在视图元素中采用ref属性来设置需要访问的DOM元素
    a. 该ref属性可采用字符值的执行设置
    b. 该ref属性可采用v-bind:或:ref的形式来绑定函数,其函数的第一个参数则为该元素
  2. 如果元素的ref属性值采用的是字符串形式
    a. 在选项式 API JS中,可通过this.$refs来访问模板引用
    b. 在组合式 API JS中,我们需要声明一个同名的ref变量,来获得该模板的引用

访问模板引用【选项式】

<script>
export default {data: () => ({accountEl: null,passwordEl: null}),methods: {changeAccountInputStyle() {this.accountEl = this.$refs.account // 获取账号输入框的 DOMconsole.log(this.accountEl)this.accountEl.style = "padding: 15px"this.accountEl.className = "rounded"this.accountEl.focus()},passwordRef(el) { this.passwordEl = el  // el 元素是密码输入框},changePasswordInputStyle() {console.log(this.passwordEl) console.log(this.$refs) // 函数式声明的 ref,不会在this.$refs中获取this.passwordEl.style = "padding: 15px"this.passwordEl.className = "rounded"this.passwordEl.focus()},}
}
</script><template><!-- ref 字符串值形式 -->账号输入框:<input type="text" ref="account"><button @click="changeAccountInputStyle">改变账号输入框的样式</button><hr><!-- ref 函数形式:元素渲染后,会立即执行该函数 -->密码输入框:<input type="password" :ref="passwordRef"><button @click="changePasswordInputStyle">改变密码输入框的样式</button>
</template><style>
.rounded {border-radius: 15px;
}
</style>

访问模板引用【组合式】

<script setup>
import { ref } from 'vue';// 账号输入框
let account = ref(null) // ref 变量名和账号输入框中的 ref 属性值一样function changeAccountInputStyle() {console.log(account.value)account.value.style = 'padding: 10px'account.value.className = 'rounded'account.value.focus()
}// ------------------------------------------------------------------------// 密码输入框元素
let passwordEl = ref(null)function passwordRef(el) {passwordEl.value = el // el 元素是密码输入框
}function changePasswordInputStyle() {console.log(passwordEl.value)passwordEl.value.style = 'padding: 10px'passwordEl.value.className = 'rounded'passwordEl.value.focus()
}
</script><template><!-- ref 字符串值形式 -->账号输入框:<input type="text" ref="account"><button @click="changeAccountInputStyle">改变账号输入框的样式</button><hr><!-- ref 函数形式:元素渲染后,会立即执行该函数-->密码输入框:<input type="password" :ref="passwordRef"><button @click="changePasswordInputStyle">改变密码输入框的样式</button>
</template><style>
.rounded {border-radius: 15px;
}
</style>

2.v-for中的模板引用

当在v-for中使用模板引用时:

  1. 如果ref值是字符串形式,在元素被渲染后包含对应整个列表的所有元素【数组】
  2. 如果ref值是函数形式,则会每渲染一个列表元素则会执行对应的函数【不推荐使用】

注意:需要v3.2.25及以上版本

列表渲染指令中的模板引用【选项式】

<script>
export default {data: () => ({books: [{ id: 1, name: '红楼梦' },{ id: 2, name: '三国演义' },{ id: 3, name: '水浒传' },{ id: 4, name: '西游记' }],students: [{ id: 1, name: 'Jack' },{ id: 2, name: 'Annie' },{ id: 3, name: 'Tom' }]}),methods: {changeBookListStyle() {console.log(this.$refs.bookList)this.$refs.bookList[2].style = 'color: red'},studentsRef(el) {console.log(el)}}
}
</script><template><ul><!-- 如果 ref 值是字符串形式,在元素被渲染后包含对应整个列表的所有元素【数组】 --><li v-for="b in books" :key="b.id" ref="bookList">{{ b.name }}</li></ul><button @click="changeBookListStyle">点我查看 bookList </button><hr><!-- 如果ref值是函数形式,则会每渲染一个列表元素则会执行对应的函数【不推荐使用】 --><ul><li v-for="s in students" :key="s.id" :ref="studentsRef">{{ s.name }}</li></ul>
</template>

列表渲染指令中的模板引用【组合式】

<script setup>
import { onMounted, ref } from 'vue';// 书本
let books = ref([{ id: 1, name: '海底两万里' },{ id: 2, name: '骆驼祥子' },{ id: 3, name: '老人与海' },{ id: 4, name: '安徒生童话' },
])let bookList = ref(null)onMounted(() => {console.log(bookList.value); // 获取引用的 DOM 对象,并打印,发现那么是数组,bookList.value[2].className = 'error'
})
</script><template><ul><li v-for="b in books" :key="b.id" ref="bookList">{{ b.name }}</li></ul>
</template><style>
.error {border: 1px solid red;
}
</style>

3.组件上的ref

模板引用也可以被用在一个子组件上;这种情况下引用中获得的值是组件实例

  1. 如果子组件使用的是选项式 API ,默认情况下父组件可以随意访问该子组件的数据和函数,除非在子组件使用expose选项来暴露特定的数据或函数,expose值为字符串数组
  2. 如果子组件使用的是组合式 API

App.vue【选项式】

<script>
import LoginVue from './components/Login.vue';
export default {components: { LoginVue },data: ()=> ({login_vue: null}),methods: {showSonData() {console.log(this.login_vue.account) // 访问子组件中的账号数据console.log(this.login_vue.password) // 访问子组件中的密码数据this.login_vue.toLogin() // 访问子组件中的去登陆函数}},mounted(){this.login_vue = this.$refs.loginView}
}
</script><template><h3>登陆界面</h3><hr><!-- 组件上的 ref 的值为该组件的实例 --><LoginVue ref="loginView" /><hr><button @click="showSonData">查看子组件中的信息</button>
</template>

Login.vue【选项式】

<script>
// 选项式 API ,默认情况下父组件可以随意访问该子组件的数据和函数等
export default {data: ()=> ({account: 'Abc31510',password: '123321'}),methods: {toLogin() {console.log('登录中……');}},// 只暴露指定数据、函数等expose: ['account', 'toLogin']
}
</script><template>账号:<input type="text" v-model="account"><br>密码:<input type="text" v-model="password">
</template>

相关文章:

关于 vue3 模板引用

文章目录前言1.访问模板引用2.v-for中的模板引用3.组件上的ref前言 如果我们需要直接访问组件中的底层DOM元素&#xff0c;可使用vue提供特殊的ref属性来访问 1.访问模板引用 在视图元素中采用ref属性来设置需要访问的DOM元素 a. 该ref属性可采用字符值的执行设置 b. 该ref属…...

Redis | 安装Redis和启动Redis服务

目录 一、Redis简介 1.1 简介 二、Redis安装 2.1 Windows安装Redis 2.2 Linux安装Redis 三、Redis服务启动和停止 3.1 Windows启动Redis服务 3.2 Linux启动Redis服务 四、Redis设置密码远程连接 4.1 为Redis登陆设置密码 4.2 设置Redis允许远程连接 五、Redis常…...

博客要考虑的最佳WordPress主题

有太多的选择会瘫痪你做决定的能力。有太多的WordPress主题&#xff0c;但仅仅只需要一个并且它是要合适的。我们建立了数十个 WordPress 博客并安装了数百个主题。根据我们所有的经验&#xff0c;我们发现Newspaper是大多数用户的最佳WordPress博客主题。这个自适应、强大的主…...

C 学习笔记 —— 函数指针

函数指针 上面的第二个char (* f) (int);写法就是函数指针的声明&#xff1b; 首先&#xff0c;什么是函数指针&#xff1f;假设有一个指向 int类型变量的指针&#xff0c;该指针储存着这个int类型变量储存在内存位置的地址。 同样&#xff0c;函数也有地址&#xff0c;因为函…...

FastDDS-3. DDS层

3. DDS层 eProsima Fast DDS公开了两个不同的API&#xff0c;以在不同级别与通信服务交互。主要API是数据分发服务&#xff08;DDS&#xff09;数据中心发布订阅&#xff08;DCPS&#xff09;平台独立模型&#xff08;PIM&#xff09;API&#xff0c;简称DDS DCPS PIM&#xf…...

9.2 IGMPv2

实验目的 &#xff08;1&#xff09; 熟悉IGMPv2的应用场景 &#xff08;2&#xff09; 掌握IGMPv2的配置方法 实验拓扑 实验拓扑如图9-17所示&#xff1a; 图9-17&#xff1a;IGMPv2 实验步骤 配置IP地址&#xff08;请参考上一个实验&#xff09;运行IGP&#xff…...

巨头混战,抢着“兜底”自动驾驶安全

诚然&#xff0c;中国汽车行业的发展绝对不会拘泥于电动化&#xff0c;必定会在电动化的基础上&#xff0c;迎接下半场的快速智能化。 2021年6月&#xff0c;长城汽车线控底盘全球首次发布。 彼时&#xff0c;长城汽车技术副总裁宋东先宣布&#xff0c;整合了线控转向、线控制…...

RightCapital 第一轮面试题

现在我们就马上开始吧&#xff01; 答案在文末 JavaScript 是一门单线程的静态类型语言&#xff08;单选题&#xff09; 正确 错误 在 JavaScript 中下面哪种类型的值是不可变的&#xff08;immutable&#xff09;&#xff08;单选题&#xff09; Object Symbol Array Date …...

Python曲线肘部点检测-膝部点自动检测

文章目录一. 术语解释二. 拐点检测肘部法则是经常使用的法则。很多时候&#xff0c;可以凭人工经验去找最优拐点&#xff0c;但有时需要自动寻找拐点。最近解决了一下这个问题&#xff0c;希望对各位有用。一. 术语解释 **肘形曲线(elbow curve)**类似人胳膊状的曲线&#xff…...

【算法题】最大矩形面积,单调栈解法

力扣&#xff1a;84. 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 题意很简单&#xff0c;翻译一下就是&#xff1a;求该图中…...

活动策划|深度分析年货节活动该如何策划!

四月初&#xff0c;不平凡的初春开始恢复往日的平静。对于新零售行业&#xff0c;疫情的缓解也逐渐平稳生态链的运转。2020年新零售的格局在洗礼后&#xff0c;业务的聚焦点也从前端促销转移到后端履约的体验闭环&#xff0c;同时很大程度的推进企业在危机公关下的应对。618大促…...

Idea启动遇到 Web server failed to start. Port 8080 was already in use. 报错

Idea启动遇到问题-记录 报错英文提示&#xff1a; APPLICATION FAILED TO START Description: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to liste…...

Python3中zip()函数知识点总结

1.引言 在本文中&#xff0c;我将带领大家深入了解Python中的zip()函数&#xff0c;使用它可以提升大家的工作效率。 闲话少说&#xff0c;我们直接开始吧&#xff01; 2. 基础知识 首先&#xff0c;我们来介绍一些基础知识点&#xff1a; Python中的某些数据类型是不可变的…...

过滤器,监听器,拦截器的原理与在Servlet和Spring的应用

在Java Web的开发中&#xff0c;最原始和初期的学习都是从Servlet开始的&#xff0c;Servlet是Java最为耀眼的技术&#xff0c;也是Java EE的技术变革。目前大火主流的框架spring boot也的spring mvc部分也是基于拓展servlet完成的。回到之前的文章spring 实现了对servlet的封装…...

minio spring boot 秒传、分片上传、断点续传文件实现

此处后端使用的是前期封装的自定义starter&#xff0c;具体链接可参考&#xff1a;minio对象存储spring boot starter封装组件 这里主要针对前期封装的组件&#xff0c;做一个简单的应用&#xff0c;前端直传可查看之前的文章 秒传 秒传的逻辑比较简单&#xff0c;在前传上传…...

MTK平台使用Omnipeek分析空口协议讲解

讲解这个之前,我们先来了解下beacon/robe Request/Probe Response 三种帧 beacon帧 信标帧,由AP以一定的时间间隔周期性发出,以此来告诉外界自己无线网络的存在。 Beacon帧作为802.11中一个周期性的帧,Beacon周期调高,对应睡眠周期拉长,故节能(即越来休息100ms再起来…...

string和自动推断类型

欢迎来观看温柔了岁月.c的博客目前设有C学习专栏C语言项目专栏数据结构与算法专栏目前主要更新C学习专栏&#xff0c;C语言项目专栏不定时更新待C专栏完毕&#xff0c;会陆续更新C项目专栏和数据结构与算法专栏一周主要三更&#xff0c;星期三&#xff0c;星期五&#xff0c;星…...

【软件测试】从功能到自动化测试,测试人的进阶之路细节,这些必不可少......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 测试流程&#xff0…...

C语言青蛙跳台阶【图文详解】

青蛙跳台阶前言1. 题目介绍2. 解题思路3. 利用图片来演示青蛙跳台阶的原理4. 如何用C语言实现青蛙跳台阶前言 在本文&#xff0c;我们要与一只活泼可爱的小青蛙合作&#xff0c;带领着它跳上台阶&#xff0c;这个小家伙精力充沛&#xff0c;特别擅长于跳跃。我们要让它做我们的…...

笔记(五)——list容器的基础理论知识

list容器是一个双向链表容器&#xff0c;可以高效地进行插入删除元素&#xff0c;但是不能随机存取元素&#xff08;不支持at()和[]操作符&#xff09;。一、list容器的对象构造方法list对象采用模板类的默认构造形式例如list<T> lst&#xff1b;#include<iostream>…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...