VUE中给img动态赋值

<div v-for=("item in imgList")><img :src='item.imgSrc'>//关键点一{{item.name}}<br></div><script>data(){return{imgList:[...

robot_code

3220人浏览 · 2019-07-13 14:31:51

robot_code · 2019-07-13 14:31:51 发布

<div v-for=("item in imgList")>
    <img :src='item.imgSrc'>   //关键点一
    {{item.name}}
    <br>
</div>



<script>
     data(){
        return{
            imgList:[
                {name:'图片一',imgSrc:imgSrc:require('../imgs/1.png')},//关键点二
                {name:'图片二',imgSrc:imgSrc:require('../imgs/2.png')},
                {name:'图片三',imgSrc:imgSrc:require('../imgs/3.png')},
                {name:'图片四',imgSrc:imgSrc:require('../imgs/4.png')},
                {name:'图片五',imgSrc:imgSrc:require('../imgs/5.png')},

            ]
        }}
<script>

在vscode中如果写v-for这个循环报错,可以 ctrl+shift+x打开扩展插件列表,找到Vetur点管理选项,进入到设置里面,把最后的Vetur>Validation:Tamplate一的勾关闭

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^