vue如何动态给img赋值

下面是对于"Vue如何动态给img赋值"的完整攻略。

使用v-bind绑定img src属性

在Vue中，我们可以使用v-bind指令来动态绑定img标签的src属性。具体使用方法是：在img标签上使用v-bind指令，使用表达式绑定src属性的值，如下所示：

<template>
  <div>
    <img v-bind:src="imgSrc" alt="动态图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: 'https://via.placeholder.com/150x150'
    }
  }
}
</script>

在上面的代码中，我们通过data选项定义了一个imgSrc变量，然后在img标签中使用了v-bind指令，将imgSrc变量的值绑定到src属性上。这样，在页面渲染时，Vue会动态地根据imgSrc的值，生成相应的图片。

使用计算属性动态计算img src属性

除了使用v-bind指令来动态绑定img的src属性外，Vue中还有另外一种更加灵活的方式。那就是：使用计算属性来动态计算img标签的src属性的值。具体使用方法如下：

<template>
  <div>
    <img :src="computedImgSrc" alt="动态图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: 'https://via.placeholder.com/',
      imgSize: '150x150',
      imgFormat: 'png'
    }
  },
  computed: {
    computedImgSrc() {
      return `${this.imgUrl}${this.imgSize}.${this.imgFormat}`
    }
  }
}
</script>

在上面的代码中，我们定义了三个变量imgUrl、imgSize和imgFormat，分别表示图片的地址、大小和格式。然后，通过computed选项定义了一个计算属性computedImgSrc，这个计算属性会根据imgUrl、imgSize和imgFormat的值，动态计算出图片的src属性。最后，在img标签中使用:src的语法糖，将计算属性computedImgSrc绑定到src属性上。

这种方式的好处是，我们可以在计算属性中使用任意的逻辑来计算img的src值。而不单单是简单地拼接字符串。这种方式适用于那些需要根据一些状态来动态计算img的src属性的场景中。

以上两种方法的本质是相同的，都是通过在数据层面动态地修改img的src属性的值，从而实现动态展示不同的图片。具体使用哪种方法取决于具体的场景和需求。

希望这份攻略对您有所帮助。