Vue用v-for给循环标签自身属性添加属性值的方法
作者:........lhh 发布时间:2024-04-10 10:30:56
标签:vue,v-for,循环,属性值
我的代码结构如下所示不能执行,会出现报错
<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'
}
}
}
报错信息:
修改代码如下: 修改内容为 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',
}
}
}
效果如下:
图片添加src时:
第一种:
<img v-for='url in imgurl' :src='url' />
export default {
data(){
return{
imgurl:['../assets/img/icon1.png' ,
'../assets/img/icon2.png']
}
}
}
报错如下:
修改之后的代码: 修改内容为:
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')]
}
}
}
结果为:
第二种:
当我们需要在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给循环标签自身属性添加属性值的方法网站的支持!
来源:https://www.cnblogs.com/lliuhh/p/7691604.html
0
投稿
猜你喜欢
- 在处理数据的时候,经常会碰到CSV类型的文件,下面将介绍如何读取当前目录下的CSV文件,步骤如下1、获取当前目录所有的CSV文件名称:#创建
- 1. 首先到 nodejs.org 下载 Node.js 安装包并安装。2. 打开 Sublime Text 2 编辑器。选择菜单 Tool
- #!/usr/bin/python #-*-coding:utf-8-*-from PyQt4.QtGui import *fr
- 前言在一个分布式环境中,每台机器上可能需要启动和停止多个进程,使用命令行方式一个一个手动启动和停止非常麻烦,而且查看每个进程的状态也很不方便
- NumPy提供了多种存取数组内容的文件操作函数。保存数组数据的文件可以是二进制格式或者文本格式。二进
- 安装依赖主要这边还需要安装两个依赖,gorm、viper ,具体的可以访问他们的官网(Gorm官网地址 Viper Github地址)初始化
- 粘贴一下部分的多进程代码if __name__ == '__main__': "&quo
- 在进行接口自动化测试时,有好多接口都基于登陆接口的响应值来关联进行操作的,在次之前试了很多方法,都没有成功,其实很简单用session来做。
- 本文实例为大家分享了python实现电子书翻页的具体代码,供大家参考,具体内容如下1.题目:电子书翻页:(1)自动翻页:每次默认读三行,读完
- 从照片里面获取GPS信息。可交换图像文件常被简称为EXIF(Exchangeable
- ExecuteReader(),ExecuteNonQuery(),ExecuteScalar(),ExecuteXmlReader()之间
- 互联网上的资源多不胜数,无论我们搜索资料还是查阅新闻,或者是在网上淘物等等,肯定没少见分页!分页模式和表现方法也是各有千秋。我们来看看下面这
- python爬虫--爬取网易云音乐评论方1:使用selenium模块,简单粗暴。但是虽然方便但是缺点也是很明显,运行慢等等等。方
- 对于初学者来说,一份详尽又清晰明白的指南很重要。今天,猫猫跟大家一起,好好学习Python文件读写的内容,这部分内容特别常用,掌握后对工作和
- 很多朋友在留言区询问关于python上传文件和字符到服务器的问题,现编针对这个给大家整理了一个解决办法。上传简单的字符串def send_s
- 如下所示:RuntimeError: stack expects each tensor to be equal size, but got
- 在Python中,任何类型的对象都可以做真值测试,并且保证返回True或者False。以下几种值(不论类型)在真值测试中返回False:1.
- 前段时间做一个小项目,为了同时存储多条数据,其中有一个功能是解析Excel并把其中的数据存入对应数据库中。花了两天时间,不过一天多是因为用了
- window.location.pathname 比如: /windows/location/page.html 我想得到“windows”
- PHP crypt() 函数定义和用法crypt() 函数返回使用 DES、Blowfish 或 MD5 算法加密的字符串。在不同的操作系统