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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
Javascript函数的参数
Jul 16 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
vue使用canvas实现移动端手写签名
Sep 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
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
VueJS全面解析
2016/11/10 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
js里面的变量范围分享
2020/07/18 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
你常见到的runtime exception
2016/09/05 面试题
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
毕业生的自我评价
2013/12/30 职场文书
助学贷款贫困证明
2014/09/23 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
Python实现生活常识解答机器人
2021/06/28 Python