动态ref，灵活掌控样式，点亮你的Vue项目

2022-11-01 09:01:17

揭秘 Vue.js ref 的秘密：动态操纵元素样式的利器

引言

在 Vue.js 的世界中，ref 就像一把魔法钥匙，它让你拥有超凡的能力，可以根据需要动态地操纵 DOM 元素的样式，从而构建出交互性十足且响应迅速的应用程序。本文将深入探讨 ref 的用法，让你掌握这项核心技术，提升 Vue.js 开发技巧。

什么是 ref

ref 本质上是一个指令，它允许你给一个 DOM 元素分配一个唯一的引用，这样你就可以在以后的代码中轻松地访问该元素。例如，你可以为一个 <div> 元素指定 ref="myElement"，然后通过 this.$refs.myElement 来引用它。

动态添加和修改 ref

ref 的真正魔力在于它的灵活性。你可以根据需要动态地添加和修改 ref。例如，假设你有一个包含多个列表项的列表。你可以使用数组循环来为每个列表项动态地添加一个唯一的 ref，如下所示：

<ul>
  <li v-for="item in items" :ref="'item' + item.id">
    {{ item.name }}
  </li>
</ul>

然后，你可以在方法中获取这些 ref 的 DOM 元素，并根据需要修改它们的样式。

代码示例

下面是一个代码示例，演示了如何在 Vue.js 项目中使用 ref 来动态地添加和修改元素的样式：

<template>
  <div>
    <ul>
      <li v-for="item in items" :ref="'item' + item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="changeColor">更改颜色</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  methods: {
    changeColor() {
      for (let i = 0; i < this.items.length; i++) {
        const ref = this.$refs['item' + this.items[i].id]
        ref.style.color = 'red'
      }
    }
  }
}
</script>