1. <template>
  2. <div ref="contain">{{content}}</div>
  3. <button @click="getElemet">获取元素</button>
  4. <input type="text" ref="username">
  5. </template>
  6. <script>
  7. export default {
  8. name: "RefDemo",
  9. data(){
  10. return{
  11. content:"内容"
  12. }
  13. },
  14. methods:{
  15. getElemet(){
  16. console.log(this.$refs.contain.innerHTML="改变")
  17. console.log(this.$refs.username.value)
  18. }
  19. }
  20. }
  21. </script>
  22. <style scoped>
  23. </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. 如何使用API接口获取Lazada商品详情数据

    随着电商市场的不断发展壮大,越来越多的人开始选择在网上购买商品.其中,东南亚地区的Lazada电商平台备受欢迎.如果您是一名电商从业者,或者打算在Lazada上开店,那么获取商品详情信息将是一个非常重 ...

  2. 如何利用电商API接口来获取商品数据

    要利用电商API接口来获取商品数据,我们可以按照以下步骤实现: 确定电商平台和API接口 不同的电商平台提供不同的API接口,因此我们需要确定我们要获取商品数据的电商平台,并选择相应的API接口进行调 ...

  3. hihocoder offer收割赛。。#1284

    好久没刷题,水一水,反正排不上名次..这道题记下 我想着蛋疼的做了质因数分解,然后再算的因子个数..慢的一比,结果导致超时,还不如直接一个for循环搞定..也是醉了 最后其实就是算两个数的gcd,然后 ...

  4. 使用JAVA调用KRPANO加密XML

    KRPano自带的命令行工具krpanotools可以加密XML,具体的参数说明如下语法:   krpanotools32.exe encrypt [OPTIONS] inputfiles input ...

  5. Sealos 新功能“定时任务”上线(省钱大杀器)

    流量高峰时段资源不足?低流量时段服务器成本过高? 本着好用又省钱的目标,sealos 推出 定时任务 功能,保证稳定的同时降低成本. Sealos 国内集群:https://cloud.sealos. ...

  6. Solution Set -「ARC 111」

    「ARC 111A」Simple Math 2 Link. \(\lfloor \frac{10^N - kM^2}{M} \rfloor \equiv \lfloor \frac{10^N}{M} ...

  7. vue2实现饼图Pie组件封装

    实现如下效果: 效果展示:https://code.juejin.cn/pen/7226656439941955644 如果不会请移步到官网的栗子,请点击查看 直接给大家上代码: 整体代码片段 1 & ...

  8. Llama2-Chinese项目:3.2-LoRA微调和模型量化

      提供LoRA微调和全量参数微调代码,训练数据为data/train_sft.csv,验证数据为data/dev_sft.csv,数据格式为"<s>Human: "+ ...

  9. Go语言常用标准库——fmt

    文章目录 fmt 向外输出 Print Fprint Sprint Errorf 格式化占位符 通用占位符 布尔型 整型 浮点数与复数 字符串和[]byte 指针 宽度标识符 其他falg 获取输入 ...

  10. GeoServer发布影像WMTS服务

    WMTS提供了一种采用预定义图块方法发布数字地图服务的标准化解决方案. WMTS: 切片地图web服务(OpenGIS Web Map Tile Service) 使用GeoServer发布WMTS服 ...