美文网首页
Vue用v-for给src属性赋值

Vue用v-for给src属性赋值

作者: 牧码人小鹏 | 来源:发表于2017-09-15 15:37 被阅读527次

我的代码结构如下面代码所示,无法执行,在img中的src属性中无法用mustache表示法

<div id="test">
    <div v-for="item in lists">
        <img src="{{item.img}}">
    </div>
</div>
new Vue({
    el: "#test",
    data: function () {
        return {
            lists: [
                { img : 'img1' },
                { img : 'img2' },
                { img : 'img3' },
                { img : 'img4' }                
            ]
        }
    },
})

后来我将html中的代码改成如下

<div id="test">
    <div v-for="item in lists">
        <img v-bind:src="item.img">
    </div>
</div>

使用v-bind标签后,就可以正常使用了

相关文章

  • Vue用v-for给src属性赋值

    我的代码结构如下面代码所示,无法执行,在img中的src属性中无法用mustache表示法 后来我将html中的代...

  • Meta 的 referrer 干什么用

    背景:最近在做一个 vue 项目,项目中的一些图片来自外网,动态的赋值给src属性,结果加载不出来,如果拿上地址直...

  • vue 当v-for遇见图片src属性

    vue路上的小白,文章纯为了给自己做个笔记,大神们勿喷。 敲了个demo,用v-for渲染1-8.png的图片,如...

  • vue的简单运用和用V-for指令制作表单

    1.运用V-for指令表格制作 2用Vue输出hello Vue 3用V-for循环数组和对象

  • 2018-09-10第一节vue

    v-for循环1,用vue输出内容 2,用v-for循环数组或对象 3,用v-for循环输出数组对象

  • Vue 基础

    Vue 起步 Vue V-for循环 (一) Vue V-for 循环(二) Vue v-for表格

  • gulimall知识点

    1.前端 vue插值表达式{{}}是给标签体赋值 v-bind是给标签属性赋值 2.数据校验 JSR303@Not...

  • vue2仿写eleme小结

    Impressions vue中的常用缩写 属性绑定:src === v-bind:src 事件绑定@click ...

  • TypeError: Cannot read property

    vue在v-for便利数组中的对象,至少有一个属性没有相应的属性

  • 路径问题&假链接&锚点

    路径问题 其实想给src属性赋值有两种方式: 通过相对路径赋值(掌握)相对路径就是每次都从.html文件所在的文件...

网友评论

      本文标题:Vue用v-for给src属性赋值

      本文链接:https://www.haomeiwen.com/subject/oeossxtx.html