Vue用v-for给循环标签自身属性添加属性值的方法

 更新时间:2018年10月18日 15:39:41   作者:........lhh  
这篇文章主要介绍了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给循环标签自身属性添加属性值的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue3 自定义指令控制按钮权限的操作代码

    vue3 自定义指令控制按钮权限的操作代码

    这篇文章主要介绍了vue3 自定义指令控制按钮权限,为了提高用户体验,当该按钮无权使用时,使用el-tooltip功能进行提醒,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Ant Design Vue table组件如何自定义分页器

    Ant Design Vue table组件如何自定义分页器

    这篇文章主要介绍了Ant Design Vue table组件如何自定义分页器问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 一文详解vue3项目实战中的接口调用

    一文详解vue3项目实战中的接口调用

    在企业开发过程中,往往有着明确的前后端的分工,前端负责接收、使用接口,后端负责编写、处理接口,下面这篇文章主要给大家介绍了关于vue3项目实战中的接口调用的相关资料,需要的朋友可以参考下
    2022-12-12
  • Vue学习之Vuex的使用详解

    Vue学习之Vuex的使用详解

    这篇文章主要介绍了Vue中的插件:Vuex。本文将围绕它的优缺点、使用场景和示例展开详细的说明,感兴趣的小伙伴可以跟随小编一起了解一下
    2022-01-01
  • 关于Vue3路由push跳转问题(解决Vue2this.$router.push失效)

    关于Vue3路由push跳转问题(解决Vue2this.$router.push失效)

    这篇文章主要介绍了Vue3路由push跳转问题(解决Vue2this.$router.push失效),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • Vue基于Element-ui实现表格弹窗组件

    Vue基于Element-ui实现表格弹窗组件

    这篇文章主要为大家详细介绍了Vue基于Element-ui实现表格弹窗组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue绑定class的三种方法

    vue绑定class的三种方法

    这篇文章主要介绍了vue绑定class的三种方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12
  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    本篇文章主要介绍了Vuex之理解Store的用法,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法已对象形式传入其实例中
    2017-04-04
  • vue3+element Plus如何实现弹框的拖拽、可点击底层页面功能

    vue3+element Plus如何实现弹框的拖拽、可点击底层页面功能

    这篇文章主要介绍了vue3+element Plus如何实现弹框的拖拽、可点击底层页面功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • Vue+Openlayers实现实时坐标点展示

    Vue+Openlayers实现实时坐标点展示

    这篇文章主要为大家详细介绍了Vue+Openlayers实现实时坐标点展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论