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 Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
JS canvas实现画板和签字板功能
Feb 23 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
canvas的神奇用法
2017/02/03 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
浅析Python requests 模块
2020/10/09 Python
Django多个app urls配置代码实例
2020/11/26 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
中学生班主任评语
2014/01/30 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
环境保护标语
2014/06/20 职场文书
公司踏青活动方案
2014/08/16 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
javascript函数式编程基础
2021/09/15 Javascript
Vue h函数的使用详解
2022/02/18 Vue.js
Java实现带图形界面的聊天程序
2022/06/10 Java/Android
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python