在前端開發中，展示圖片是常見的需求。而在Vue中，我們可以通過單個img標簽來展示一張圖片。這篇文章將詳細介紹Vue中如何賦值單個img標簽。

首先，在Vue中使用單個img標簽需要注意一個問題，即img標簽中的src屬性不能直接使用{{ }}表達式來綁定數據，這是因為img標簽中的src屬性是被瀏覽器直接解析的，而不是被Vue解析的。所以，如果我們要給img標簽賦值，需要使用Vue提供的v-bind指令。

// 給img標簽綁定數據

如上代碼所示，我們通過v-bind指令將img標簽的src屬性綁定到了imgSrc變量上。這樣，當imgSrc的值發生改變時，img標簽中的圖片也會被更新。

接下來，我們看一下imgSrc變量應該如何定義。在Vue中，我們可以將imgSrc定義為一個普通的data屬性，然后通過其它方法來改變imgSrc變量的值。

// 定義imgSrc變量
data() {
return {
imgSrc: ''
}
},
// 方法一：在mounted鉤子函數中改變imgSrc的值
mounted() {
this.imgSrc = 'https://xxx.jpg';
}
// 方法二：通過Vue的computed屬性來動態計算imgSrc的值
computed: {
imgUrl() {
return 'https://xxx.jpg';
}
}

如上代碼所示，我們可以通過mounted鉤子函數或computed屬性來改變imgSrc的值，使得img標簽中的圖片得到更新。

另外，如果我們想要讓img標簽中的圖片根據用戶的操作來動態地展示不同的圖片，我們可以在Vue的methods中定義一個方法來改變imgSrc變量的值。

// 定義changeImg方法
methods: {
changeImg() {
this.imgSrc = 'https://yyy.jpg';
}
}
// 在按鈕中調用changeImg方法切換圖片

如上代碼所示，我們定義了一個changeImg方法，在方法中改變imgSrc的值，然后在按鈕中調用changeImg方法就可以動態地展示不同的圖片了。

綜上所述，Vue中賦值單個img標簽需要注意不能直接使用{{ }}表達式，而是需要使用v-bind指令。可以通過定義data屬性、computed屬性、方法等方式來改變imgSrc變量的值，從而實現img標簽的動態賦值。