Vue 动态图片 src - 随便

有时候，我们需要在 Vue 应用中动态地改变图片的路径，例如根据用户 id 来显示用户头像。这时，我们可以使用 Vue 的 v-bind 指令以及 JavaScript 的模板字面量语法来实现。

1. 确定图片路径

首先，我们需要确定图片路径的格式。一般来说，图片路径会包含一个基础路径和一个变量部分。例如，我们的用户头像路径可能长这个样子：

https://example.com/assets/images/avatars/{{ userId }}.jpg

其中，{{ userId }} 是一个变量，代表用户 id。我们后面会在 Vue 中动态地改变这个变量的值。

2. 绑定图片 src

接下来，在 Vue 中，我们需要使用 v-bind 指令来绑定 <img> 标签的 src 属性。例如：

<template>
  <img v-bind:src="avatarUrl" alt="User avatar">
</template>

这里的 avatarUrl 变量代表我们之前确定的图片路径。现在它还没有值，但我们后面会在 Vue 的计算属性中为它赋值。

3. 计算属性

计算属性是 Vue 中一个非常强大的特性，它可以根据某些数据的变化自动更新自己的值。我们可以使用计算属性来动态地生成图片路径。

<template>
  <img v-bind:src="avatarUrl" alt="User avatar">
</template>

<script>
export default {
  data() {
    return {
      userId: 1
    }
  },
  computed: {
    avatarUrl() {
      return `https://example.com/assets/images/avatars/${this.userId}.jpg`;
    }
  }
}
</script>

这里，我们定义了一个 userId 变量，它现在是固定的。然后，我们使用计算属性 avatarUrl 来动态生成图片路径。它会根据 userId 的变化自动更新。现在它还没有显示图片，但之后当我们改变 userId 的值时，图片就会自动更新了。

4. 改变 userId 的值

最后，我们需要让用户能够改变 userId 的值。我们可以通过一个表单来实现这个功能。

<template>
  <div>
    <img v-bind:src="avatarUrl" alt="User avatar">
    <form>
      <input type="text" v-model="userId">
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 1
    }
  },
  computed: {
    avatarUrl() {
      return `https://example.com/assets/images/avatars/${this.userId}.jpg`;
    }
  }
}
</script>

这里，我们添加了一个表单，里面包含一个 <input> 元素。我们通过 v-model 指令将这个表单元素和 userId 变量绑定起来。现在，当用户在表单中输入新的用户 id 后，计算属性 avatarUrl 会根据新的 userId 值自动更新了。

结语

以上就是在 Vue 应用中动态改变图片路径的方法。通过 v-bind 指令、计算属性和表单等 Vue 特性的组合使用，我们可以非常方便地实现这个功能。