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改变Session的值(用ajax实现)
Dec 28 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
详解JavaScript函数对象
Nov 15 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
DOM事件探秘篇
Feb 15 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
vuex存储token示例
Nov 11 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
如何在JavaScript中正确处理变量
Dec 25 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
Linux安装配置php环境的方法
2016/01/14 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
python实现数通设备端口监控示例
2014/04/02 Python
python解析xml文件操作实例
2014/10/05 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Python程序运行原理图文解析
2018/02/10 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python挖矿算力测试程序详解
2019/07/03 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
Python self用法详解
2020/11/28 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
学子宴答谢词
2014/01/25 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis