提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue的基本组件4(ref)

Vue组件 基本 ref
2023-09-14 09:14:26 时间

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>

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

相关文章