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


Posted in Javascript onOctober 18, 2018

我的代码结构如下所示不能执行,会出现报错

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

报错信息:

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

 修改代码如下:  修改内容为 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',
  }
 }
}

效果如下:

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

图片添加src时:

第一种:

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

报错如下:

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

修改之后的代码:  修改内容为: 

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

结果为:

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

第二种:

当我们需要在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给循环标签自身属性添加属性值的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 #Javascript
webstorm+vue初始化项目的方法
Oct 18 #Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 #Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 #Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 #Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 #Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 #Javascript
You might like
Zend公司全球首推PHP认证
2006/10/09 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
查看keras的默认backend实现方式
2020/06/19 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
关于环保的演讲稿
2014/05/10 职场文书
应届生自荐信
2014/06/30 职场文书
个人整改方案范文
2014/10/25 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
深入理解 Golang 的字符串
2022/05/04 Golang