欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

vue img 賦值

錢淋西2年前8瀏覽0評論

Vue中給圖片賦值時,可以使用v-bind指令將圖片的src屬性綁定到一個變量或表達(dá)式上,當(dāng)變量或表達(dá)式的值改變時,圖片也會相應(yīng)地改變。

示例代碼如下:

<template>
<div>
<img v-bind:src="imgSrc">
</div>
</template>
<script>
export default {
data() {
return {
imgSrc: 'https://picsum.photos/200'
}
},
methods: {
changeImgSrc() {
this.imgSrc = 'https://picsum.photos/300'
}
}
}
</script>

在上面的示例代碼中,img標(biāo)簽的src屬性被綁定到了data屬性中的imgSrc變量,初始值為'https://picsum.photos/200'。當(dāng)imgSrc變量的值改變時,圖片的src屬性也會相應(yīng)地改變,從而實現(xiàn)了圖片的動態(tài)賦值。

在Vue中,也可以使用v-bind簡寫語法(:)來簡化代碼,例如:

<img :src="imgSrc">

同時,如果圖片的路徑是相對于項目的根目錄的,可以使用require()函數(shù)來給圖片賦值,示例代碼如下:

<img :src="require('@/assets/images/logo.png')">

上述代碼中,@表示項目的src目錄,assets/images/logo.png是相對于src目錄的路徑。使用require()函數(shù)可以將圖片打包到webpack中,從而實現(xiàn)項目的優(yōu)化。