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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
jquery ready函数源代码研究
Dec 06 Javascript
javascript常用方法汇总
Dec 02 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
基于node实现websocket协议
Apr 25 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
详解JavaScript 的变量
Mar 08 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
vue props 一次传多个值实例
Jul 22 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
再说下636单管机
2021/03/02 无线电
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php遍历数组的方法分享
2012/03/22 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
express框架下使用session的方法
2019/07/31 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python unittest实现api自动化测试
2018/04/04 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
就业自荐信
2013/12/04 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
致接力运动员加油稿
2015/07/21 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书