Vue的基本组件4(ref)

极客李华

已于 2022-10-15 20:58:59 修改

阅读量446

点赞数 1

分类专栏： Vue的学习之旅文章标签： vue.js javascript 前端

于 2022-10-11 20:58:44 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/127271386

版权

Vue的学习之旅专栏收录该内容

30 篇文章 2 订阅

订阅专栏

ref

简介：ref是refence的缩写，就是引用的意思，所以它的功能就是一种连接，各个模块的作用，这么说比较抽象，直接看代码。

学习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ref</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getInfo()">获取内容 </button>
        <h3 ref="para"> 这是一段话。<span> 随便写的。</span> </h3>
    </div>
</body>
<script>
    const app = new Vue({
        el:"#app",
        methods:{
            getInfo(){
            // 通过ref将getInfo方法与h3标签连接
                console.log(this.$refs.para.innerHTML); // 获取的是HTML文本
                console.log(this.$refs.para.innerText); // 获取的是文本中的内容
            }
        }
    });
    </script>
</html>

运行结果：
在这里插入图片描述

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

极客李华

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue的基本组件4(ref)

ref是refence的缩写，就是引用的意思，所以它的功能就是一种连接，各个模块的作用，这么说比较抽象，直接看代码。// 通过ref将getInfo方法与h3标签连接。// 获取的是HTML文本。// 获取的是文本中的内容。
复制链接

扫一扫