Vue $refs 操作 DOM 元素
Vue 大约 638 字$refs
每个Vue
组件实例上都包含一个$refs
对象,对象中存储着对应的DOM
元素或组件的引用。
默认情况下,$refs
指向一个空对象。
ref
在元素中添加ref
属性,并指定属性值,就会向$refs
中注册(添加)这个元素。
ref
可以添加在普通标签元素,也可以添加在组件上。
<template>
<div>
<p ref="myP">文字</p>
<MyComponent ref="myComponent"></MyComponent>
<button @click="showThis">按钮</button>
</div>
</template>
操作元素
通过this.$refs.refName
操作元素。
export default {
methods: {
showThis() {
console.log(this)
console.log(this.$refs.myP)
console.log(this.$refs.myP.textContent)
this.$refs.myP.style.color = 'red';
this.$refs.myComponent.changeValue();
}
}
}
阅读 113 · 发布于 2022-12-23
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
MySQL 中文全文检索 ngram 处理停止词阅读 3828
-
Redis删除数据后内存不释放解决方法阅读 2862
-
Spring OpenFegin 实现微服务间 RPC 调用阅读 280
-
Java WebSocket 获取 HttpSession阅读 2627
-
Prometheus+Alertmanager 搭建告警系统阅读 922
-
算法每日一题20190623:最长公共前缀阅读 2249
-
IDEA 复制弹框错误提示信息快捷键阅读 593
-
软考-系统架构设计师:需求分类-需求获取阅读 1838
-
Spring 循环依赖能否用二级缓存解决阅读 1555
-
Linux 常用命令之基础命令阅读 1871