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 10件让人费解的事情
Feb 15 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php获取访问者IP地址汇总
2015/04/24 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
教大家制作简单的php日历
2015/11/17 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
python里将list中元素依次向前移动一位
2014/09/12 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python实现维吉尼亚算法
2019/03/20 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
SQL面试题
2013/04/30 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
ktv收银员岗位职责
2013/12/16 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
西安导游词
2015/02/12 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android