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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
vue使用监听实现全选反选功能
Jul 06 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
vue 全局环境切换问题
Oct 27 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
accesskey 提交
2006/06/26 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
Python中eval带来的潜在风险代码分析
2017/12/11 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python中remove函数的踩坑记录
2021/01/04 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
C面试题
2015/10/08 面试题
岗位聘任书范文
2014/03/29 职场文书
法学自荐信
2014/06/20 职场文书
高中学校对照检查材料
2014/08/31 职场文书
苏州园林导游词
2015/02/03 职场文书
年度考核个人总结
2015/03/06 职场文书
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
pt-archiver 主键自增
2022/04/26 MySQL