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" />