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 相关文章推荐
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 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中base_convert()进制数字转换函数实例
2014/11/20 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jQuery对象初始化的传参方式
2015/02/26 Javascript
require.js的用法详解
2015/10/20 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
python中的代码编码格式转换问题
2015/06/10 Python
用Python shell简化开发
2018/08/08 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
web页面录屏实现
2019/02/12 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
.net开发工程师面试题
2014/02/25 面试题
教师校本培训方案
2014/02/26 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
教师节大会主持词
2015/07/06 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
Python中如何处理常见报错
2022/01/18 Python