Vue的ref与$refs

一、Vue的ref与$refs

      通过this.$refs获取对应的DOM元素

对应代码

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div id="title" ref="titleRef">标题</div>
        <div ref="conRef">内容</div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            mounted() {
             let title=document.getElementById('title');
             let titleRef=this.$refs.titleRef;
             console.log(title==titleRef);
             //  {titleRef:dom,conRef:dom}
             titleRef.innerHTML='Hello'
             this.$refs['conRef'].innerHTML='hello';
            },
        })
    </script>
</body>
</html>

　　

对应效果

 

posted @ 2024-11-27 15:40  白头吟  阅读(18)  评论(0)    收藏  举报