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

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

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

我的代碼結構如下所示不能執(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'
 }
 }
}

報錯信息：

修改代碼如下：修改內容為 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']  
     }
  }
}

報錯如下：

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

 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給循環(huán)標簽自身屬性添加屬性值的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vue3?自定義指令控制按鈕權限的操作代碼
這篇文章主要介紹了vue3?自定義指令控制按鈕權限,為了提高用戶體驗，當該按鈕無權使用時，使用el-tooltip功能進行提醒，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-10-10
Ant Design Vue table組件如何自定義分頁器
這篇文章主要介紹了Ant Design Vue table組件如何自定義分頁器問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
一文詳解vue3項目實戰(zhàn)中的接口調用
在企業(yè)開發(fā)過程中,往往有著明確的前后端的分工,前端負責接收、使用接口,后端負責編寫、處理接口,下面這篇文章主要給大家介紹了關于vue3項目實戰(zhàn)中的接口調用的相關資料,需要的朋友可以參考下
2022-12-12
Vue學習之Vuex的使用詳解
這篇文章主要介紹了Vue中的插件：Vuex。本文將圍繞它的優(yōu)缺點、使用場景和示例展開詳細的說明，感興趣的小伙伴可以跟隨小編一起了解一下
2022-01-01
關于Vue3路由push跳轉問題(解決Vue2this.$router.push失效）
這篇文章主要介紹了Vue3路由push跳轉問題(解決Vue2this.$router.push失效）,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-07-07
Vue基于Element-ui實現(xiàn)表格彈窗組件
這篇文章主要為大家詳細介紹了Vue基于Element-ui實現(xiàn)表格彈窗組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue綁定class的三種方法
這篇文章主要介紹了vue綁定class的三種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
Vuex之理解Store的用法
本篇文章主要介紹了Vuex之理解Store的用法，Store類就是存儲數(shù)據(jù)和管理數(shù)據(jù)方法的倉庫，實現(xiàn)方式是將數(shù)據(jù)和方法已對象形式傳入其實例中
2017-04-04
vue3+element Plus如何實現(xiàn)彈框的拖拽、可點擊底層頁面功能
這篇文章主要介紹了vue3+element Plus如何實現(xiàn)彈框的拖拽、可點擊底層頁面功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-11-11
Vue+Openlayers實現(xiàn)實時坐標點展示
這篇文章主要為大家詳細介紹了Vue+Openlayers實現(xiàn)實時坐標點展示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03