vue動態(tài)設(shè)置img的src路徑實(shí)例
更新時間：2018年09月18日 14:21:00 作者：haeasringnar
今天小編就為大家分享一篇vue動態(tài)設(shè)置img的src路徑實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
相信開發(fā)的小伙伴已經(jīng)遇到這個問題了，動態(tài)切換img標(biāo)簽的src時，寫的路徑就是不生效，原因是vue并沒有把你的路徑字符串當(dāng)做路徑來處理，而是直接當(dāng)做字符串了，當(dāng)然網(wǎng)上也有很多方法，這里使用的是最有效的方法。
看代碼：
使用導(dǎo)入資源的方式
<template>
<div @click="home">
<img :src="home_url" alt="..." style="height: 10vw">
</div>
</template>
<script>
// 下面是導(dǎo)入兩張圖片的相對地址
import home_no from '../static/icon/home_no.png'
import home from '../static/icon/home.png'
export default {
name: "newbase",
data () {
return {
home_url: home
}
},
methods: {
home() {
this.home_url = home
}
}
}
</script>
這樣就可以非常有效的，動態(tài)改變img的圖片路徑。
以上這篇vue動態(tài)設(shè)置img的src路徑實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中的計(jì)算屬性computed傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細(xì)介紹了如何在vue中封裝axios請求并集中管理,w文中的示例代碼講解詳細(xì),具有一定的參考價值,有需要的小伙伴可以了解下2023-10-10
vue點(diǎn)擊彈窗自動觸發(fā)點(diǎn)擊事件的解決辦法(模擬場景)
本文通過案例場景給大家介紹vue點(diǎn)擊彈窗自動觸發(fā)點(diǎn)擊事件的解決辦法，通過兩種方法給大家分享vue 自動觸發(fā)點(diǎn)擊事件的處理方法，對vue自動觸發(fā)點(diǎn)擊事件相關(guān)知識感興趣的朋友一起看看吧2021-05-05
這篇文章主要介紹了vue3 vite如何讀取文件內(nèi)容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題
這篇文章主要介紹了Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Avue和Element-UI動態(tài)三級表頭的實(shí)現(xiàn)
本文主要介紹了Avue和Element-UI動態(tài)三級表頭的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼
這篇文章主要介紹了Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue?MVVM雙向綁定實(shí)例詳解(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)
使用vue也好有一段時間了,也算對其雙向綁定原理也有了解個大概,這篇文章主要給大家介紹了關(guān)于vue?MVVM雙向綁定(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)的相關(guān)資料,需要的朋友可以參考下2022-03-03
Vue監(jiān)聽器簡單使用及注意事項(xiàng)說明
這篇文章主要介紹了Vue監(jiān)聽器簡單使用及注意事項(xiàng)說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3使用vue-router及路由權(quán)限攔截方式
這篇文章主要介紹了vue3使用vue-router及路由權(quán)限攔截方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04