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 数组的方法集合
Jun 05 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
js jquery数组介绍
Jul 15 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
js实现简单计算器
Nov 22 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
JS获取当前时间戳方法解析
Aug 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
使用php来实现网络服务
2009/09/15 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
限制文本字节数js代码
2007/03/06 Javascript
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Django 多环境配置详解
2019/05/14 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
我的中国梦主题班会
2015/08/14 职场文书