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 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 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 获取远程文件内容的函数代码
2010/03/24 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
QQ登录简单实现代码
2021/03/09 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
Python封装shell命令实例分析
2015/05/05 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python使用建议与技巧分享(一)
2020/08/17 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
学校运动会霸气口号
2014/06/07 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2015新学期家长寄语
2015/02/26 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers