vue如何动态绑定img的src属性(v-bind)

在Vue中，可以使用v-bind指令动态绑定HTML元素的属性。对于img标签的src属性，我们也可以使用v-bind进行动态绑定。

具体实现步骤如下：

1. 绑定数据到Vue实例的data中

首先，需要将图片的URL地址存储在Vue实例的data中，作为动态绑定的数据。例如：

<template>
  <div>
    <img :src="imageUrl" alt="示例图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/images/example.jpg'
    }
  }
}
</script>

1. 使用v-bind指令绑定数据到img标签的src属性

接下来，在img标签中，使用v-bind指令将Vue实例的imageUrl属性与src属性绑定起来。示例代码如下：

<template>
  <div>
    <img :src="imageUrl" alt="示例图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/images/example.jpg'
    }
  }
}
</script>

在上述代码中，使用了v-bind指令，并通过冒号:简写语法，将Vue实例的imageUrl属性绑定到img标签的src属性上。

1. 动态改变data中的属性值

通过修改Vue实例中data的属性值，从而动态地改变展示的图片地址。示例代码如下：

<template>
  <div>
    <img :src="imageUrl" alt="示例图片">
    <button @click="changeImageUrl">更换图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/images/example.jpg'
    }
  },
  methods: {
    changeImageUrl() {
      this.imageUrl = 'https://example.com/images/another.jpg';
    }
  }
}
</script>

在上述代码中，添加了一个按钮，用于触发changeImageUrl方法，该方法将Vue实例中imageUrl属性的值修改为另一张图片的URL地址。

示例代码2：

<!-- 通过v-for循环绑定图片地址 -->
<template>
  <div>
    <img v-for="(url, index) in imageList" :key="index" :src="url" alt="示例图片">
    <button @click="changeImageList">更换图片列表</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: ['https://example.com/images/example1.jpg', 'https://example.com/images/example2.jpg', 'https://example.com/images/example3.jpg'],
      currentImageIndex: 0
    }
  },
  methods: {
    changeImageList() {
      this.currentImageIndex = (this.currentImageIndex + 1) % this.imageList.length;
    }
  },
  computed: {
    currentImageUrl() {
      return this.imageList[this.currentImageIndex];
    }
  }
}
</script>

在上述代码中，使用了v-for指令循环展示了多张图片，通过绑定computed计算属性currentImageUrl来动态获取展示的图片的URL地址，并在按钮的click事件中通过修改Vue实例中currentImageIndex属性的值，从而动态更改展示的图片。