vue.js - Vue 渲染数组

问题描述

问 题

初学Vue写的一个静态小demo 可是失败了= =

【2017/3/11 18：12 】
其实我原来这样写也是可以的= =我改错文件了。。也谢谢下面解答的大神~

html：

<div id="content">
     <template v-for="item in items">
         <div class="box">
            <img v-bind:src="'sourse/'+item.imgPath" class="pic">
            <span class="tittle">{{item.tittle}}</span>
            <span class="price">{{item.price}}</span>
        </div>
     </template>
</div>

js部分：

var goods=new Vue({
    el:'#content',
    data:{
        items:[
            {
                imgPath:'k.jpg',
                tittle:'一只大笨熊',
                price:'￥9999',
            },
            {
                imgPath:'00.jpg',
                tittle:'一只傻狐狸',
                price:'￥1',
            },
        ]    
    }
})

错误提示是

第七行是tittle那里

关于Vue的语法理解不是很好，请问是哪里出错了吗？？

解决方案

<div id="content">
         <div class="box" v-for="item in items">
            <img v-bind:src="'sourse'+item.imgPath" class="pic">
            <span class="tittle">{{item.tittle}}</span>
            <span class="price">{{item.price}}</span>
        </div>
</div>

这篇关于vue.js - Vue 渲染数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！