Vue如何使用v-for給循環標簽自身屬性添加屬性值

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

我的代碼結構如下所示不能執行，會出現報錯

<RadioGroup v-model="animal">
 <Radio v-for='a in radio_arr' label={{a}}></Radio>
</RadioGroup>
export default {
 data(){
 return{
  radio_arr:['循環1','循環2','循環3'],
    animal:'循環2'
 }
 }
}

報錯信息：

 修改代碼如下：  修改內容為 label={{a}} 修改為  ：label='a' 

<RadioGroup v-model="animal">
 <Radio v-for='a in radio_arr' :label='a'></Radio>
</RadioGroup>
export default {
 data(){
  return{
   radio_arr:['循環1','循環2','循環3'],
   animal:'循環2',
  }
 }
}

效果如下：

圖片添加src時：

第一種：

<img v-for='url in imgurl' :src='url' />
export default {
 data(){
  return{
      imgurl:['../assets/img/icon1.png' ,
           '../assets/img/icon2.png']  
     }
  }
}

報錯如下：

修改之后的代碼：  修改內容為： 

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

修改為

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

<img v-for='url in imgurl' :src='url' />
export default {
 data(){
  return{
   imgurl:[require('../assets/img/icon1.png') 
         ,require('../assets/img/icon2.png')]
  }
 }
}

結果為：

第二種:

當我們需要在js代碼里面寫圖片路徑的時候，如果我們在data里面寫

/*錯誤寫法*/
imgUrl:'../assets/logo.png'

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

<img :src="avatar" />
import avatar from '@/assets/logo.png'

在data里面定義

avatar: avatar

第三種：

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

imgUrl ： '../../static/logo.png'
<img :src="imgUrl" />

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