zoukankan      html  css  js  c++  java
  • 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" />
  • 相关阅读:
    感悟优化——Netty对JDK缓冲区的内存池零拷贝改造
    由浅入深理解Java线程池及线程池的如何使用
    Http学习笔记
    zookeeper集群配置详细教程
    kafka学习笔记——基本概念与安装
    干货——详解Java中的关键字
    Java基础巩固——排序
    你可以这么理解五种I/O模型
    Java中的NIO基础知识
    Java基础巩固——异常
  • 原文地址:https://www.cnblogs.com/lliuhh/p/7691604.html
Copyright © 2011-2022 走看看