实例属性ref的用法

最新推荐文章于 2024-05-02 18:43:48 发布

chengqiuming

最新推荐文章于 2024-05-02 18:43:48 发布

阅读量956

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/chengqiuming/article/details/108420338

版权

Vue 专栏收录该内容

161 篇文章 16 订阅

订阅专栏

一点睛

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

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

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

二代码

<!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">
        <!-- 实例属性ref相对于id -->
        <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>

三效果

chengqiuming

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实例属性ref的用法

一点睛1 直接通过对象.的方式调用的属性，是来自于data或computed中的属性，但vue对象中的el、data等等这些键也称为属性，这些属性就是Vue对象的实例属性。2 实例属性ref相对于id。3实例属性和普通属性的对比二代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 的实例对象</title...
复制链接

扫一扫