<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. 论文解读(IW-Fit)《Better Fine-Tuning via Instance Weighting for Text Classification》

    Note:[ wechat:Y466551 | 可加勿骚扰,付费咨询 ] 论文信息 论文标题:Better Fine-Tuning via Instance Weighting for Text Cl ...

  2. mac安装mysql8.0

    1.进入下载页 历史版本:https://downloads.mysql.com/archives/community/ 最新版本:https://dev.mysql.com/downloads/my ...

  3. Badusb制作,远程别人电脑

    Badusb制作 插一下U盘黑一台电脑,插了我的U盘你可就是我的脑了,(▽) 理论准备 我们要用它就应该知道他的工作原理是怎么样的,方便我们去发散思维去使用它. Badusb的原理是利用HID(Hum ...

  4. 青语言V1.0正式发布

    大家好,距离6月1日青语言发布第一个版本已经过去了三个月,而今我们按计划发布青语言的1.0版本. 青语言主页:https://qingyuyan.cn V1发布宣传视频:https://www.bil ...

  5. 多层前馈神经网络及BP算法

    一.多层前馈神经网络 首先说下多层前馈神经网络,BP算法,BP神经网络之间的关系.多层前馈[multilayer feed-forward]神经网络由一个输入层.一个或多个隐藏层和一个输出层组成,后向 ...

  6. 如何平息WPS for linux启动后,笔记本风扇的怒吼

    create:2022-09-06 20:02:45 WPS启动后,点击菜单栏右上角[未同步]按钮,不登录,直接关掉.几秒后,笔记本风扇嗷嗷叫.桌面conky显示wpscloudsvr进程CPU占用8 ...

  7. gitlab与LDAP 联调

    gitlab整理 目录 gitlab整理 1.安装Gitlab依赖包 2.下载,安装 3.配置,访问域名及邮箱 4.初始化,启动 5.访问,以及邮箱测试 5.1汉化 6.问题总结处理 6.1安装时出现 ...

  8. 图解 LeetCode 算法汇总——链表

    本文首发公众号:小码A梦 一般数据主要存储的形式主要有两种,一种是数组,一种是链表.数组是用来存储固定大小的同类型元素,存储在内存中是一片连续的空间.而链表就不同于数组.链表中的元素不是存储在内存中可 ...

  9. 4-MySQL数据库的常用操作

    在MySQL数据库中,增删改查操作是指对数据进行添加.删除.查询和修改的操作.这些操作在数据库管理和维护中非常重要,可以帮助数据库管理员和开发人员有效地管理数据和实现各种复杂的数据处理需求. 添加数据 ...

  10. mpi转以太网连接300PLC实现以太网通信配置方法

    西门子S7300PLC连接MPI-ETH-XD1.0实现以太网通信配置方法 产品简介 兴达易控MPI-ETH-XD1.0用于西门子S7-200/SMART S7-200/S7-300/S7-400/西 ...