Vue-35、Vue中使用ref属性

1、ref属性

在这里插入图片描述

2、代码

<template><div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">--><h1 v-text="msg" ref="title"></h1><button @click="showDOM"  ref="btn">点我输出上方dom元素</button><School ref="sch"></School></div>
</template>
<script>
import  Student from './components/Student.vue'
import School from './components/School.vue'
export default {name: 'App',components: {Student,School},data(){return{msg:'欢迎来学习',}},methods:{showDOM(){console.log(this.$refs.title);//获取真实dom元素console.log(this.$refs.btn);//真实DOM元素console.log(this.$refs.sch);//school组件实例对象}}
}
</script>
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #500012;margin-top: 60px;
}
</style>

在这里插入图片描述

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

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

相关文章

服务器发送http请求

1、发送GET请求 curl localhost:9009/setCreateDataItem?a1&bnihao 2、发送POST请求 curl -X POST -d a1&bnihao localhost:9009/setCreateDataItem 3、发送json格式请求&#xff1a; curl -H "Content-Type: application/json" -X POST -d {"abc…

Dify学习笔记-基础介绍(一)

1、简介 Dify AI是一款强大的LLMOps&#xff08;Language Model Operations&#xff09;平台&#xff0c;专为用户提供便捷的人工智能应用程序开发体验。 该平台支持GPT系列模型和其他模型&#xff0c;适用于各种团队&#xff0c;无论是用于内部还是外部的AI应用程序开发。 它…

clickhouse 代替 es 如何对文档做模糊查询?

概述 模糊查询在日志存储的场景中非常普遍。ClickHouse作为大数据分布式引擎&#xff0c;理所当然地会被作为日志存储的备选方案。事实上使用ClickHouse作为日志存储方案&#xff0c;业界目前也已经在多家企业落地&#xff0c;比如Uber、石墨文档、映客、快手、携程、唯品会等…

RKE快速搭建离线k8s集群并用rancher管理界面

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 本文记录使用RKE快速搭建一套k8s集群过程&#xff0c;使用的rancher老版本2.5.7&#xff08;当前最新版为2.7&#xff09;。适用…

5分钟做自己的微信红包封面

文章目录 怎么制作自己的红包封面&#xff1f;开通红包封面的要求如下&#xff1a;收费情况制作具体网站&#xff1a;https://chatapi.onechat.fun/register?affYoU6 提交审核logo封面、挂件、气泡证明材料 发放红包封面其他 怎么制作自己的红包封面&#xff1f; 开通红包封面…

React16源码: React中的completeWork对HostText处理含更新的源码实现

HostText 1 &#xff09;概述 在 completeWork 中 对 HostText的处理在第一次挂载和后续更新的不同条件下进行操作 第一次挂载主要是创建实例后续更新其实也是重新创建实例 2 &#xff09;源码 定位到 packages/react-reconciler/src/ReactFiberCompleteWork.js#L663 到 c…

有挑战才有收获!PaddleOCR算法模型挑战赛火热开启!

在数字化时代&#xff0c;文本和表格识别在生活和工作中扮演着越来越重要的角色。从扫描件、图片中的文字提取&#xff0c;到自动化录入数据、分析报表&#xff0c;这些场景都需要高效准确的文本识别和表格识别技术。作为PaddleOCR开源项目背后的维护者&#xff0c;飞桨团队一直…

【第十五课】数据结构:堆 (“堆”的介绍+主要操作 / acwing-838堆排序 / 时间复杂度的分析 / c++代码 )

目录 关于堆的一些知识的回顾 数据结构&#xff1a;堆的特点 "down" 和 "up"&#xff1a;维护堆的性质 down up 数据结构&#xff1a;堆的主要操作 acwing-838堆排序 代码如下 时间复杂度分析 确实是在写的过程中频繁回顾了很多关于树的知识&…

【开源】基于JAVA+Vue+SpringBoot的教学过程管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 教师端2.2 学生端2.3 微信小程序端2.3.1 教师功能如下2.3.2 学生功能如下 三、系统展示 四、核心代码4.1 查询签到4.2 签到4.3 查询任务4.4 查询课程4.5 生成课程成绩 六、免责说明 一、摘要 1.1 项目介绍 基于JAVAVu…

一文读懂量化交易中的算法交易使用!

高频交易策略利用计算机&#xff0c;在人类交易者能够处理他们观察到的信息之前&#xff0c;根据以电子方式接收到的信息做出精心的决定来启动订单。 为通过挂单被动成交来追求更好的交易均价&#xff0c;随着人工智能&#xff0c;机器学习等技术的引入&#xff0c;逐渐演变为…

flink-java使用介绍,flink,java,DataStream API,DataSet API,ETL,设置 jobname

1、环境准备 文档&#xff1a;https://nightlies.apache.org/flink/flink-docs-release-1.17/zh/ 仓库&#xff1a;https://github.com/apache/flink 下载&#xff1a;https://flink.apache.org/zh/downloads/ 下载指定版本&#xff1a;https://archive.apache.org/dist/flink…

Git的管理操作

目录 前言 认识工作区、暂存区、版本库 小结&#xff1a; 使用场景--1&#xff1a; git log&#xff1a; 查看.git文件&#xff1a; 使用场景--2&#xff1a; git status&#xff1a; git diff&#xff1a; 进行提交&#xff1a; 总结&#xff1a; 版本回退 退…

vue3模板中使用全局常量和全局方法

<img v-if"isNotEmpty(item.url)" :src"HOSTitem.url"/> 比如上述代码中需要使用全局方法 isNotEmpty判断当前图片是否为空和HOST常量前缀&#xff0c;发现不起作用&#xff0c;经过多方查证&#xff0c;需要再main.js中加入如下配置&#xff1a; …

Python函数调用的9大方法详解

概要 在Python中&#xff0c;函数是一种非常重要的编程概念&#xff0c;它们使得代码模块化、可重用&#xff0c;并且能够提高代码的可读性。本文将深入探讨Python函数调用的9种方法&#xff0c;包括普通函数、匿名函数、递归函数、高阶函数等&#xff0c;以及它们的应用示例。…

python内置函数有哪些?整理到了7大分类48个函数,都是工作中常用的函数

python内置函数 一、入门函数 1.input() 功能&#xff1a; 接受标准输入&#xff0c;返回字符串类型 语法格式&#xff1a; input([提示信息])实例&#xff1a; # input 函数介绍text input("请输入信息:") print("收到的数据是:%s" % (text))#输出…

k8s---pod的水平自动伸缩HPA

HPA&#xff1a;Horizontal Pod Autoscaling是pod的水平自动伸缩。是k8s自带的模块 pod占用CPU的比率到达一定的阈值会触发伸缩机制。 replication controller&#xff1a;副本控制器。控制pod的副本数 deployment controller&#xff1a;节点控制器。部署pod hpa控制副本的…

怎么他们都有开源项目经历|手把手教你参与开源

一、前言 大家好&#xff0c;这里是白泽。有一些同学提问&#xff0c;希望在自己的简历上增加一些有含金量的项目经历&#xff0c;最好能够去参与一些开源项目的开发&#xff0c;但由于对一个庞大的开源项目缺乏认知&#xff0c;难以着手。同时也担心自己能力不足&#xff0c;…

亚信安慧AntDB:AntDB-M元数据锁之锁的获取(三)

5 锁的获取 5.1 锁的强弱 当线程已经持有的锁比新申请的锁更强时&#xff0c;认为已经持有了锁&#xff0c;无需再对申请锁类型加锁。锁的强弱指持有的锁与其他锁的不兼容集合大小&#xff0c;集合相同锁相同&#xff0c;集合更大锁更强&#xff0c;否则无强弱关系。通过锁的…

C++——fstream文件读写操作

文件类型 文本文件 - 文件以文本的ASCII码形式存储在计算机中 二进制文件 - 文件以文本的二进制形式存储在计算机中&#xff0c;用户一般不能直接读懂它们 操作文件类 ofstream&#xff1a;写操作 ifstream&#xff1a; 读操作 fstream &#xff1a; 读写操作 文件打开方…

php比较运算,强相等(===)弱相等(==)表

弱相等&#xff08;&#xff09; 符号为&#xff1a; 规则为&#xff1a;只比较值&#xff0c;不比较类型&#xff0c;只要值对就为true 样例&#xff1a;比较整型123和字符串"123"&#xff0c;运行结果给出了true 弱相等表&#xff1a;* 代表在 PHP 8.0.0 之前为…