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 相关文章推荐
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
package.json各个属性说明详解
Mar 11 Javascript
JavaScript oncopy事件用法实例解析
May 13 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 裁剪图片成固定大小代码方法
2009/09/09 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP 类与构造函数解析
2017/02/06 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Python将string转换到float的实例方法
2019/07/29 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
计算机专业毕业生求职信分享
2013/12/24 职场文书
超市端午节活动方案
2014/01/23 职场文书
手工社团活动方案
2014/02/17 职场文书
农林环境专业求职信
2014/03/13 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
高中教师个人工作总结
2015/02/10 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
贫困证明书范文
2015/06/16 职场文书
2015小学师德工作总结
2015/07/21 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
导游词之塘栖古镇
2019/12/04 职场文书