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 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
百度小程序之间的页面通信过程详解
Jul 18 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
PHP变量内存分配问题记录整理
2013/11/27 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Python 3 判断2个字典相同
2019/08/06 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
毕业生自荐书
2013/12/18 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
路政管理求职信
2014/06/18 职场文书
工作总结与自我评价
2014/09/18 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
教师外出学习心得体会
2016/01/18 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang