vue学习笔记-双向数据绑定及ref获取Dom节点（4）

vue学习笔记之双向数据绑定及ref获取Dom节点

双向数据绑定
注意：只用于表单

<template>
  <div id="app">
    <p>{{msg}}</p>
    <input type="text" v-model="msg">
    <button v-on:click="getMsg">获取表单里面的值</button>
    <!-- v-on:click的简写 @click -->
    <button @click="setMsg">设置表单里面的值</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return{
      msg:'采菇凉的小蘑菇'
    }
  },
  methods:{
    getMsg(){
      alert(this.msg)
    },
    setMsg(){
      this.msg="我设置后的数据"
    }
  }
}
</script>

运行效果如下：

ref获取Dom节点

<template>
  <div id="app">
    <input type="text" ref="inputText">
    <button v-on:click="getMsg">获取表单里面的值</button>
    <!-- v-on:click的简写@click -->
    <button @click="setMsg">设置表单里面的值</button>

    <hr>
    <div class="box" ref="box">我将改变颜色</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return{
      msg:'采菇凉的小蘑菇'
    }
  },
  methods:{
    getMsg(){
      //获取ref定义的Dom节点
      console.log(this.$refs.inputText);
      //打印input的值
      alert(this.$refs.inputText.value);

      //改变div颜色
      this.$refs.box.style.color="red"
    },
    setMsg(){
      this.$refs.inputText.value="我设置后的数据"
    },

  }
}
</script>

运行结果如下：