vue-study2-双向绑定及获取dom

<template>
  <div id="app">
    {{msg}}
    <input type="text" v-model='msg' ref="userinfo"/><br>
    <button v-on:click="changeview()">changeview</button><br>
    <br><hr>
    <button @click="getdom()">getdom</button>
    <br><hr>

    <button @click="requestData()">requestData</button>
    <button data-testid='haha' @click="eventhandle($event)">eventhandle</button>
    <ul>
      <li v-for="(item,key) in list">

        {{item}}------{{key}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App567",
      list:[]
    }
  },
  methods:{
    changeview(){
      this.msg="this view has been changed";
    },
    getdom(){
      this.$refs.userinfo.style.background = 'red';
    },
    requestData(){
      for(var i=0;i<10;i++){
        this.list.push(i);
      }
    },
    eventhandle(a){
      a.srcElement.style.background='red';
       alert(a.srcElement.dataset.testid);
    }
  }
};
</script>

<style>

</style>