<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. python 面试题第一弹

    1. 如何理解Python中的深浅拷贝 浅拷贝(Shallow Copy)创建一个新的对象,该对象的内容是原始对象的引用.这意味着新对象与原始对象共享相同的内存地址,因此对于可变对象来说,如果修改了其 ...

  2. LR性能分析

    如何模拟真实用户的行为 真实用户的操作是否可预期,比如考试 用户一般会先打开考试页面,然后答题 那么会有多种题型,用户是不是有可能答不同的题型 性能的拐点

  3. RocketMQ 系列(四) 消息存储

    RocketMQ 系列(四) 消息存储 本文是 RocketMQ 系列的第四篇,下面是前面几篇的文章,不清楚的话点击看一下吧. RocketMQ系列(一) 基本介绍 RocketMQ 系列(二) 环境 ...

  4. Oracle为表添加约束

    转载自:https://blog.csdn.net/qq_38662525/article/details/94192475 创建一个学生表和院系表:院系表为主表,学生表为从表   create ta ...

  5. Record - Nov. 20th, 2020 - Exam. SOL

    LOC 2020.11.20 - Prob. 1 Desc. & Link. \(C=2^{k}\bmod(a+b+c)\) #include <cstdio> typedef l ...

  6. 用Rust手把手编写一个Proxy(代理), TLS加密通讯

    用Rust手把手编写一个Proxy(代理), TLS加密通讯 项目 ++wmproxy++ gite: https://gitee.com/tickbh/wmproxy github: https:/ ...

  7. DB2---创建返回结果集的函数

    在数据验证中,经常遇到需返回结果集的操作,故整理一个返回结果集的DB2函数,便于后期查阅 1.准备测试表 /*创建测试表:设置结果集的属性为表字段*/ CREATE TABLE Test_EXWAST ...

  8. Redis系列之——高级用法

    文章目录 一 慢查询 1.1 生命周期 1.2 两个配置 1.2.1 slowlog-max-len 1.2.2 slowlog-max-len 1.2.3 配置方法 1.3 三个命令 1.4 经验 ...

  9. About Info-ZIP

    LATEST RELEASES: Zip 3.00 was released on 7 July 2008. WiZ 5.03 was released on 11 March 2005. UnZip ...

  10. python~windows自动化工具 uiautomation库

    微软提供了关于自动化操作PC端桌面应用程序的工具,官方描述为: Microsoft UI Automation is an accessibility framework that enables W ...