<template>
<div ref="contain">{{content}}</div>
<button @click="getElemet">获取元素</button>
<input type="text" ref="username">
</template> <script>
export default {
name: "RefDemo",
data(){
return{
content:"内容"
}
},
methods:{
getElemet(){
console.log(this.$refs.contain.innerHTML="改变")
console.log(this.$refs.username.value)
}
}
}
</script> <style scoped> </style>

vue-test --------ref的更多相关文章

  1. Vue.js-11:第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  2. Vue使用Ref跨层级获取组件实例

    目录 Vue使用Ref跨层级获取组件实例 示例介绍 文档目录结构 安装vue-ref 根组件自定义方法[使用provide和inject] 分别说明各个页面 结果 Vue使用Ref跨层级获取组件实例 ...

  3. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  4. vue中$ref的基本用法

    1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...

  5. vue里ref ($refs)用法

    ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...

  6. vue 使用ref获取DOM元素和组件引用

    在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...

  7. vue的ref试用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. Vue使用ref 属性来获取DOM

    注意,在父组件中可以使用this.$refs.属性名  获取任何元素的属性和方法,子组件不可以获取父组件中的 <!DOCTYPE html> <html lang="en& ...

  9. 17、前端知识点--Vue中ref的使用

    methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...

  10. vue之ref

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件. 1.ref ...

随机推荐

  1. ELK环境部署-基础环境安装(一)

    ELK简介 ElasticSearch工作原理以及专用名词 ELK是Elasticsearch(ES) , Logstash, Kibana的结合,是一个开源日志收集软件. Elasticsearch ...

  2. Nomad 系列-安装

    系列文章 Nomad 系列文章 Nomad 简介 开新坑!近期算是把自己的家庭实验室环境初步搞好了,终于可以开始进入正题研究了. 首先开始的是 HashiCorp Nomad 系列,欢迎阅读. 关于 ...

  3. CVE-2018-8120 漏洞复现

    CVE-2018-8120 漏洞复现 漏洞描述 win32k.sys中函数 SetImeInfoEx未对指针进行合法性检查,从而导致一个任意地址写. 漏洞分析 漏洞成因 int __stdcall S ...

  4. Solution -「CF 959E」Mahmoud and Ehab and the xor-MST

    Description Link. 一完全图有 \(n\) 个节点 \(0,...,n-1\),其中边 \((i,j)\) 的权值为 \(i\oplus j\),其中 \(\oplus\) 为位异或操 ...

  5. Teamcenter RAC 开发之《AbstractRendering》

    背景 关于Teamcenter RAC 客制化渲染表单,做一两个有时间做还是可以的,问题是大批量做的时候就会存在很多重复的代码 例如: 1.定义很多 TCProperty,JTextFiled,ite ...

  6. MySQL实战实战系列 04 深入浅出索引(下)

    在上一篇文章中,我和你介绍了 InnoDB 索引的数据结构模型,今天我们再继续聊聊跟 MySQL 索引有关的概念. 在开始这篇文章之前,我们先来看一下这个问题: 在下面这个表 T 中,如果我执行 se ...

  7. HOMER7配置告警

    概述 HOMER是一款100%开源的针对SIP/VOIP/RTC的抓包工具和监控工具. HOMER是一款强大的.运营商级.可扩展的数据包和事件捕获系统,是基于HEP/EEP协议的VoIP/RTC监控应 ...

  8. 解密网络通信的关键技术(上):DNS、ARP、DHCP和NAT,你了解多少?

    IP 协议相关技术 在与 IP 协议相关的技术中,有一些重要且常见的技术,其中包括 DNS 域名解析.ARP 协议.DHCP 动态获取 IP 地址以及NAT 网络地址转换.这些技术在网络通信中起着关键 ...

  9. 报错AttributeError: Attempted to set WANDB to False, but CfgNode is immutable

    问题  今天在跑代码的时候,使用到了wandb记录训练数据.  我在23服务器上跑的好好的,但将环境迁移到80服务器上重新开始跑时,却遇到了如下报错  看这个报错信息是由于wandb没有apis这个属 ...

  10. tmai

    天猫精灵技能应用平台合作协议 发布日期:2020年03月18日 更新日期:2021年02月01日 鉴于您(语音技能.小程序或应用程序APP等的制作.提供或开发者)希望入驻或与天猫精灵技能应用平台(又称 ...