热门标签
热门文章
- 1免费GPT制作，没有chatGPT会员也能体验
- 2Swift内存所有权宣言
- 3微信小程序-自定义标题栏_由于skyline页面的navigationstyle
- 4linux中wait系统调用
- 5STM32G030C8T6：USART串口通信（中断）_stm32g030c8t6串口
- 6Ceph 存储集群1-配置：硬盘和文件系统、配置 Ceph、网络选项、认证选项和监控器选项...
- 7时间序列分类04：如何开发LSTMs模型实现人类活动识别（CNN-LSTM、ConvLSTM）_lstm分类模型
- 82024年2月小结-git报错error：failed to push some refs to ‘https://gitee...‘，接手安卓项目的各种报错
- 9一文彻底搞懂Kafka如何保证消息不丢失_kafka数据刷盘
- 10网络划分笔记_核心层 骨干层
当前位置: article > 正文
Vue学习——ref属性_vscode中ref是什么属性
作者：花生_TL007 | 2024-03-09 06:19:19
赞
踩
vscode中ref是什么属性
1.被用来给元素或子组件注册引用信息（id的代替者）
2.应用在html标签上获得的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
3.使用方式：
打标识： <h1 ref="xxx">.....</h1> 或<Blogger ref="xxx"></Blogger>
获取：this.$refs.xxx
- <template>
- <div class="blogger">
- <h2 ref="title">{{name}}</h2>
- <el-button type="primary" plain icon="el-icon-s-opportunity" @click="showDOM">点我输出上方的DOM元素</el-button>
- <el-button type="primary" icon="el-icon-s-promotion" @click="skip">点我跳转到博主博客</el-button>
- </div>
- </template>
-
- <script>
- export default {
- name:'Blogger',
- data() {
- return {
- name: '才疏学浅的小缘同学',
- }
- },
- methods:{
- skip() {
- window.location.href="https://xiaoyuan.blog.csdn.net/"
- },
- showDOM() {
- console.log(this.$refs.title)
- }
- }
- }
- </script>
-
- <style>
- .blogger{
- text-align: center;
- }
- </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/213613
推荐阅读
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
