码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 获取DOM元素ref

时间:2019-07-30 15:56:35      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:meta   ons   error   inpu   put   对象   button   获取   col   

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="获取元素" @click="getElement" ref="mybtn">
    <!-- 这里ref是设置要获取的dom元素 -->
    <h3 id="myh3" ref="my">哈哈哈, 今天天气太好了!!!</h3>
    <hr>
    <login ref="mylogin"></login>
  </div>

  <script>

    var login = {
      template: <h1>登录组件</h1>,
      data() {
        return {
          msg: son msg
        }
      },
      methods: {
        show() {
          console.log(调用了子组件的方法)
        }
      }
    }

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: #app,
      data: {},
      methods: {
        getElement() {
          // console.log(document.getElementById(‘myh3‘).innerText)
          //  ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError
          //注意用$refs 获取的原生的DOM对象
          console.log(this.$refs.my.innerText)
          console.log(this.$refs.mylogin.msg)
          this.$refs.mylogin.show()
        }
      },
      components: {
        login
      }
    });
  </script>
</body>

</html>

 

Vue 获取DOM元素ref

标签:meta   ons   error   inpu   put   对象   button   获取   col   

原文地址:https://www.cnblogs.com/wanguofeng/p/11270281.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!