1. 程式人生 > >vue.js 選項卡切換 對img設定不同的圖片

vue.js 選項卡切換 對img設定不同的圖片

<img id="img_shared"  :src="shared"  style="margin-left: 25px;" >

給img標籤設定src

引入兩張圖片  選項卡切換的時候 設定不同的圖片

import shared_nor from '../../assets/shared_nor.png'
import shared_hover from '../../assets/shared1_hover.png'

然後在data 裡面把src 屬性定義出來

export default {
  data() {
    return {
         shared:'',//這就是img標籤中定義的的src屬性
         
    }
  },
            if(param==1){
            
           
              this.shared=shared_hover;
              
            
              
              
          }else if(param==2){
      
              this.shared=shared_nor;
             
              
          }else if(param==3){
          
              this.shared=shared_nor;
              
          }

預設進來 在生命週期函式中 呼叫

 mounted(){
      this.shared=shared_nor
      
  },