Vue用v-for給循環(huán)標簽自身屬性添加屬性值的方法

更新時間：2018年10月18日 15:39:41 作者：........lhh

這篇文章主要介紹了Vue用v-for給循環(huán)標簽自身屬性添加屬性值的方法，文中大家給大家列舉了三種方法 ,需要的朋友可以參考下

我的代碼結(jié)構如下所示不能執(zhí)行，會出現(xiàn)報錯

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

報錯信息：

修改代碼如下：修改內(nèi)容為 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:['循環(huán)1','循環(huán)2','循環(huán)3'],
   animal:'循環(huán)2',
  }
 }
}

效果如下：

圖片添加src時：

第一種：

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

報錯如下：

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

 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')]
  }
 }
}

結(jié)果為：

第二種:

當我們需要在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" />

總結(jié)

以上所述是小編給大家介紹的Vue用v-for給循環(huán)標簽自身屬性添加屬性值的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vuex入門教程,圖文+實例解析
這篇文章主要介紹了vuex入門教程，圖文+實例解析，具有很好的參考價值，希望對大家有所幫助。
2022-03-03
vue綁定的點擊事件阻止冒泡的實例
下面小編就為大家分享一篇vue綁定的點擊事件阻止冒泡的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
詳解vue中axios的使用與封裝
這篇文章主要介紹了vue中axios的使用與封裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
vue3.0 Reactive數(shù)據(jù)更新頁面沒有刷新的問題
這篇文章主要介紹了vue3.0 Reactive數(shù)據(jù)更新頁面沒有刷新的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
使用Vue指令實現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時還希望能夠?qū)Υa塊進行高亮顯示,今天我將分享一段代碼,通過Vue指令實現(xiàn)了這個功能,需要的朋友可以參考下
2023-09-09
vue腳手架搭建過程圖解
vue腳手架是個好東西，能夠快速搭建vue單頁面應用，vue是基于node環(huán)境的，所以要先安裝node。下面通過圖文并茂的形式給大家介紹vue腳手架搭建過程圖解，感興趣的朋友一起看看吧
2018-06-06
VUE+ElementUI下載文件的幾種方式(小結(jié))
本文主要介紹了VUE+ElementUI下載文件的幾種方式(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-01-01
vue-resource調(diào)用promise取數(shù)據(jù)方式詳解
這篇文章主要介紹了vue-resource調(diào)用promise取數(shù)據(jù)方式詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Vue組件間數(shù)據(jù)傳遞的方式(3種)
這篇文章主要介紹了Vue組件間數(shù)據(jù)傳遞的方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能示例
這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)庫的JSON數(shù)據(jù)輸出渲染到html頁面功能,結(jié)合實例形式分析了vue.js針對本地json數(shù)據(jù)的讀取、遍歷輸出相關操作技巧,需要的朋友可以參考下
2019-08-08