這篇文章給大家分享的是有關(guān)Vue如何使用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)離石,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

我的代碼結(jié)構(gòu)如下所示不能執(zhí)行，會(huì)出現(xiàn)報(bào)錯(cuò)

 

export default {
 data(){
 return{
  radio_arr:['循環(huán)1','循環(huán)2','循環(huán)3'],
    animal:'循環(huán)2'
 }
 }
}

報(bào)錯(cuò)信息：

 修改代碼如下：  修改內(nèi)容為 label={{a}} 修改為  ：label='a' 

 

export default {
 data(){
  return{
   radio_arr:['循環(huán)1','循環(huán)2','循環(huán)3'],
   animal:'循環(huán)2',
  }
 }
}

效果如下：

圖片添加src時(shí)：

第一種：

export default {
 data(){
  return{
      imgurl:['../assets/img/icon1.png' ,
           '../assets/img/icon2.png']  
     }
  }
}

報(bào)錯(cuò)如下：

修改之后的代碼：  修改內(nèi)容為： 

 imgurl:['../assets/img/icon1.png' , '../assets/img/icon2.png']

修改為

imgurl:[require('../assets/img/icon1.png') ,require('../assets/img/icon2.png')]


export default {
 data(){
  return{
   imgurl:[require('../assets/img/icon1.png') 
         ,require('../assets/img/icon2.png')]
  }
 }
}

結(jié)果為：

第二種:

當(dāng)我們需要在js代碼里面寫圖片路徑的時(shí)候，如果我們在data里面寫

/*錯(cuò)誤寫法*/
imgUrl:'../assets/logo.png'

此時(shí)webpack只會(huì)把它當(dāng)做字符串處理從而找不到圖片地址，此時(shí)我們可以使用import引入圖片路徑：

import avatar from '@/assets/logo.png'

在data里面定義

avatar: avatar

第三種：

我們也可以把圖片放在外層的static文件夾里面，然后在data里面定義：

imgUrl ： '../../static/logo.png'

感謝各位的閱讀！關(guān)于“Vue如何使用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！