input的ref属性

在vue中使用mvvm（model-view-viewModel）双向绑定获取表单数据。如果习惯原生操作dom的方式，可以使用vue的ref属性来获取表单的数据。

<template>
  <div id="app">
    <p>{{message}}</p>
    <input type="text"  v-model="message"/><br/>
　　<input type="text"  ref="userInfo"/>  //ref相当于原生操作dom的id
　　<button v-on:click="getInputValue()">获取第二个表单里的数据</button>
  </div>
</template>
<script>
  export default{
    name:'app',
    data(){
       return {
          message:'第一个input里的内容'
       }
    },
    methods:{
　　　　getInputValue(){
　　　　　　console.log(this.$ref.userInfo);//获取ref定义的dom节点
          //输出结果： <input type="text" >
　　　　　　cossole.log(this.$ref.userInfo.value);//获取dom节点的原生value值
       }
    }
  }
</script>

ref的作用就是用来获取dom节点，上例中 this.$ref.userInfo就相当于一个原生js的dom对象，也可以操作别的属性。

标签：原生,dom,表单,获取,userInfo,input,ref,属性
来源： https://www.cnblogs.com/redFeather/p/16174707.html