<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. Dami 本地过程调用框架(主打解耦),v0.24 发布

    Dami,专为本地多模块之间通讯解耦而设计(尤其是未知模块.隔离模块.领域模块).零依赖,特适合 DDD. 特点 结合 Bus 与 RPC 的概念,可作事件分发,可作接口调用,可作异步响应. 支持事务 ...

  2. 基于Spring事务的可靠异步调用实践

    SpringTxAsync组件是仓储平台组(WMS6)自主研发的一个专门用于解决可靠异步调用问题的组件. 通过使用SpringTxAsync组件,我们成功地解决了在仓储平台(WMS6)中的异步调用需求 ...

  3. Centos7安装yarn

    Centos7安装yarn 设置Yarn仓库 curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc ...

  4. 手动实现Transformer

      Transformer和BERT可谓是LLM的基础模型,彻底搞懂极其必要.Transformer最初设想是作为文本翻译模型使用的,而BERT模型构建使用了Transformer的部分组件,如果理解 ...

  5. 带宽优化新思路:RoCE网卡聚合实现X2增长

    本文分享自华为云社区<2个RoCE网卡Bond聚合,实现带宽X2>,作者: tsjsdbd . 我们知道操作系统里面,可以将2个实际的物理网卡,合体形成一个"逻辑网卡" ...

  6. 2020/4/29 一场令人头疼的cf。。。

    今天是被安排的cf...我真的是太菜了啊...又双叒叕被机房的一群dalao吊打了... 这就是我与6年级的dalao的区别吗...我裂开了 T1:A - Exercising Walk 简单题. 就 ...

  7. 【开源】给ChatGLM写个,Java对接的SDK

    作者:小傅哥 - 百度搜 小傅哥bugstack 博客:bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 大家好,我是技术UP主小傅哥. 清华大学计算机系的超大规模训练模型 Cha ...

  8. 它让你1小时精通RabbitMQ消息队列、且能扛高并发

    支持.Net Core(2.0及以上)与.Net Framework(4.5及以上) 本文所述方案近期被江苏省某亿级数据量+高并发的政府"物联网"项目采用,获得圆满成功!! [目录 ...

  9. PolarD&N2023秋季个人挑战—Crypto全解

    EasyRSA (额..这个题看错了不是挑战赛的.这里当做好题记录下来了) 题目信息:500 分 5 Polar币 from Crypto.Util.number import bytes_to_lo ...

  10. H5-geolocation学习

    geolocation--定位 PC--IP地址 精度比较低 IP库 Chrome -> Google 手机--GPS window.navigator.geolocation 单次 getCu ...