vue动态绑定ref(使用变量)以及获取方式

在Vue中，我们经常需要对DOM元素进行操作，比如获取dom元素的数值或进行样式改变，这时我们就需要获取到DOM元素的引用。Vue提供了ref属性，可以用来获取dom元素的引用。本文将详细介绍如何使用动态绑定ref以及获取dom元素的方法。

动态绑定ref

Vue的ref属性可以绑定到元素身上，当元素渲染后，这个元素会挂载到vm.$refs或this.$refs上。通常我们可以使用ref属性给元素一个静态名称，但有时候我们需要动态设置ref的名称，这时候我们可以使用动态绑定的方式。

示例1：使用字符串绑定

我们可以使用v-bind命令来动态设置ref的名称，比如我们使用一个变量来做为ref名称:

<template>
  <div>
    <span v-for="(item,index) in list" :ref="`item-${index}`">{{ item }}</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: ['a', 'b', 'c']
      }
    },
    methods: {
      getValue() {
        console.log(this.$refs['item-1'])
      }
    }
  }
</script>

在上例中，我们使用了v-for指令，通过index循坏数组并将每一项通过字符串拼接作为ref的名称，以此达到动态设置ref名称的目的。

我们在methods中定义了getValue方法，可以通过this.$refs.item-1来获取到对应的dom元素.

示例2：使用对象绑定

和字符串相似，我们同样可以使用对象来做为动态绑定refs名称：

<template>
  <div>
    <div v-for="index in 3" :key="index">
      <input type="text" :ref="{ index: `input-${index}` }" />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getValues() {
      console.log(this.$refs)
    }
  }
}
</script>

在上例中，我们创建了3个input元素并将其绑定到不同的索引项上，通过$refs我们可以获取到每一个input元素的dom对象。

获取DOM元素引用

在Vue中获取dom元素的引用很简单，只需要通过this.$refs或vm.$refs即可访问到对应的dom元素。

示例1：获取input数值

<template>
  <div>
    <input type="text" ref="userName" />
    <button @click="getValue">获取数值</button>
  </div>
</template>

<script>
export default {
  methods: {
    getValue() {
      console.log(this.$refs.userName.value)
    }
  }
}
</script>

在上例中，我们创建了一个input元素，使用ref属性设置引用名称为userName，在methods中我们定义了getValue方法，通过获取$refs中引用为userName的dom元素并使用value属性获取其输入值。

示例2：改变元素样式

<template>
  <div>
    <h1 ref="title" class="old">旧标题</h1>
    <button @click="changeTitle">改变标题</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeTitle() {
      this.$refs.title.classList.remove('old');
      this.$refs.title.classList.add('new');
      this.$refs.title.innerText = "新标题";
    }
  }
}
</script>

<style>
.old {
  color: gray;
}
.new {
  color: red;
}
</style>

在上例中，我们将一个h1标签设置了ref绑定名称为title，同时我们给其一个class样式。在点击更改标题按钮后，我们通过$refs获取dom元素的引用，并使用classList的remove和add方法更改了其class样式，最后设置了其innerText实现了文本的更改。