VUE开发–获取DOM对象和组件对象(十九)

时间:2022-07-25
本文章向大家介绍VUE开发–获取DOM对象和组件对象(十九),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一、vue通过$refs获取到dom对象(获得dom对象改变里面的内容)

模板:
   <button @click="getdata">获取dom对象</button>
    <div ref="mydiv">这是一个div</div>

js:
  methods: {
    getdata: function() {
      //在这个方法中通过vue形式获取到div的对象,比js和jq都方便
      console.log(this.$refs.mydiv);
      //改变div里面的innerText内容
      this.$refs.mydiv.innerText = "修改以后的值";
    }
  }

二、获取当前点击对象的内容

模板:
    <ul>
      <li v-for="(item,index)  in tabList" v-on:click="addClass(index,$event)">{{item.title}}</li>
    </ul>
JS:

  data() {
    return {
      tabList: [
        { id: 0, title: "首页1" },
        { id: 1, title: "首页2" },
        { id: 2, title: "首页3" }
      ],
      current: 0
    };
  },
  methods: {
  addClass: function(index,event) {
      this.current = index;
      //获取点击对象      
      var el = event.currentTarget;
      console.log("当前对象的内容:"+el.innerHTML);
      console.log(this.current)
    }
  }

三、this对象

  1. 组件对象
模板:
  <button v-on:click="getMessage">获取message的值</button> 
JS:
  data() {
    return {
      myPhone: 123456
    };
  },
  methods: {
    // 箭头函数的this指向了window,其实应该指向vue的实例
    // 普通函数
    getMessage: function() {
      alert(this.myPhone);
      console.log(this); // 指向Vue的实例
    }
  }
  1. window对象