Vue 中 :src 和 src 的区别详解

先说结论：

在 Vue 中，如果一个 src 的值是动态赋值的且需要与 data 中的变量绑定同步变化，那么应该使用 v-bind 语法（或简写为 :src） 进行动态属性绑定。如果 src 值是静态的，那么直接赋值即可。

:src

• :src 是 Vue 的动态属性绑定，用于将 src 属性的值绑定到 data() 中的一个变量。
• 当 data 中的变量发生变化时，:src 绑定的 src 属性值也会动态变化。

示例：

//html
<img :src="imgUrl">

//javascript
data() {
  return {
    imageUrl: ''
  }
},
methods: {
  changeImage() {
    this.imageUrl = 'https://www.02405.com/wp-content/uploads/2023/08/logo.webp'
  }  
}

这时，我们可以动态更新 img 的 src 属性的值。

src

• src 是普通的 HTML 属性，值是静态的。
• 如果 src 属性的值需要变化，需要重新赋值，它不会动态变化。

示例：

//html
<img src="https://www.02405.com/wp-content/uploads/2023/08/logo.webp">

Vue 中:src和src之前的区别示例：

//html
<img :src="imageUrl">
<img src="imageUrl">

//javascript
data() {
  return {
    imageUrl: ''
  }
},
methods: {
  changeImage() {
    this.imageUrl = 'https://www.02405.com/wp-content/uploads/2023/08/logo.webp'
  }  
}

通过下面的 javascript 代码，动态更新 imageUrl 属性后，第一个 img 正常显示图片，src 属性为动态更新的 imageUrl，而第二个 img 是不显示图片的，src 属性为空。