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 CSS画图之基础篇
Jul 29 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
javascript实现图片轮换动作方法
Aug 07 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过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
js实现右键菜单功能
2016/11/28 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
聊聊Python中的pypy
2018/01/12 Python
django之自定义软删除Model的方法
2019/08/14 Python
python循环输出三角形图案的例子
2019/11/22 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python urllib2运行过程原理解析
2020/06/04 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
什么是Python包的循环导入
2020/09/08 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
门卫人员岗位职责
2013/12/24 职场文书
职业生涯规划书范文
2014/03/10 职场文书
施工质量承诺书范文
2014/05/30 职场文书
人事代理委托书
2014/09/27 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书