实例属性ref的用法

墨蓝 2021-07-25 02:58 524阅读 0赞

# 一 点睛 #

1 直接通过对象.的方式调用的属性，是来自于data或computed中的属性，但 vue 对象中的 el、data 等等这些键也称为属性，这些属性就是 Vue 对象的实例属性。

2 实例属性ref相对于id。在 vue 里面，往往使用 ref 属性来代替 id 属性的使用，这样可以快速的通过 ref 的值获得页面中的某个元素。

3 实例属性和普通属性的对比

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 二 代码 #

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 的实例对象</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    
    <div>
        <div id="app1">
            
            <button ref="mybtn1" id="btn1" @click="hanleClick1">点我</button>
            <button ref="mybtn2" id="btn2" @click="hanleClick2">点我</button>
        </div>
    </div>
    
    <script type="text/javascript">
        // Vue 的实例
        var v1 = new Vue({
            el: '#app1',
            methods: {
                hanleClick1: function () {
                    this.$refs.mybtn1.innerHTML = '通过实例属性变脸'
                },
                hanleClick2: function () {
                    this.$refs.mybtn2.innerHTML = '通过实例属性变脸'
                },
            }
        })
    </script>
    </body>
    </html>

# 三 效果 #

![20200905153822774.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/bee67d160c254b6faf0db8aab6fd583e.png
[20200905153822774.png]: /images/20210724/87e93f6de7ca424caa5f6b5c0d7bd452.png

发表评论取消回复

表情：

评论列表（有 0 条评论，524人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue里ref ($refs)用法

在项目里经常用到ref操作DOM元素或者调用子组件的方法（啥也不知道，啥都敢用），但是并不明确ref的原理，通过看官网API和各位大佬的总结终于get啦啦！！做个记录。 >

「爱情、让人受尽委屈。」/ 2022年11月20日 09:44/ 0 赞/ 192 阅读

相关 uni-app $refs的基本用法

$refs的基本用法一个对象(Object)，持有注册过 ref 特性的所有 DOM 元素和组件实例。 <template> <view cla

墨蓝/ 2022年11月13日 14:27/ 0 赞/ 556 阅读

相关组件实例的三大属性state,props,refs

组件实例的三大属性 state 我们都说React是一个状态机，体现是什么地方呢，就是体现在state上，通过与用户的交互，实现不同的状态，然后去渲染UI

布满荆棘的人生/ 2022年09月01日 08:28/ 0 赞/ 115 阅读

相关 oracle中REF Cursor用法

1，什么是 REF游标？动态关联结果集的临时对象。即在运行的时候动态决定执行查询。 2，REF 游标有什么作用？实现在程序间传递结果集的功能，利

叁歲伎倆/ 2022年06月14日 10:27/ 0 赞/ 294 阅读

相关 React Refs用法

Refs介绍 -------------------- Refs提供了一种访问在render方法中创建的DOM节点或者React元素的方法。在典型的数据流中，props

快来打我*/ 2022年05月26日 04:59/ 0 赞/ 163 阅读

相关 Vue中ref的用法

基本用法 <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加

比眉伴天荒/ 2022年05月18日 05:00/ 0 赞/ 193 阅读

相关 vue 学习（十）ref的用法

1，例子是一个计数器，就是求两个数之和 <table> <tbody> <tr> <td> <pre><!DOCTYPE html> <h

桃扇骨/ 2022年04月22日 11:44/ 0 赞/ 157 阅读

相关 vue-ref-$refs用法

[vue $refs的基本用法][vue _refs] <div id="app"> <input type="text" ref="input1

梦里梦外;/ 2021年10月09日 03:36/ 0 赞/ 313 阅读

相关实例属性ref的用法

一点睛 1 直接通过对象.的方式调用的属性，是来自于data或computed中的属性，但 vue 对象中的 el、data 等等这些键也称为属性，这些属性就是 Vue

墨蓝/ 2021年07月25日 02:58/ 0 赞/ 525 阅读

相关 React之ref详细用法

在react典型的数据流中，`props`传递是父子组件交互的唯一方式；通过传递一个新的`props`值来使子组件重新`re-render`,从而达到父子组件通信。当然，就像r

Love The Way You Lie/ 2021年06月24日 14:37/ 0 赞/ 527 阅读