Vue中ref和$refs的介绍及使用

简介: Vue中ref和$refs的介绍及使用

主要参考这个

Vue中ref和$refs的介绍及使用

今天项目中用到这个中一个div组件


<div id="win_box" style="height: auto; " ref="aaa">
      <table style=" width:300px;border-collapse: separate;
      font-size:14px;border-spacing:0 6px;table-layout:fixed;">
        <caption style="font-weight:bold;font-size:16px;
        text-align: left;
        border-bottom: #d1d8e0 1px solid">表面位移监测 - 1号地面监测点</caption>
      <tr><td style=" width: 20%;font-weight:bold;text-align:left;
      ">断面名称:</td><td style="text-align:left;width:60%;word-break:keep-all;
      white-space:nowrap;overflow:hidden;">位于50号站向西约30米</td></tr>
</div>


主要是上面的


<div id="win_box" style="height: auto; " ref="aaa">


然后在方法中想要获得这个用下面即可得到上面的那个dom元素


var Content =this.$refs.aaa;
相关文章
|
3天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
12 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
13 4
|
4天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
9 2
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1039 0
|
5天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
4天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
下一篇
无影云桌面