javascript - Vue新手，在组件中怎么使用v-for指令

问题描述

问 题

代码如下：

Vue.component('child-i',{ 
props:['msg','datato'],
template:'<h1>{{msg.title}}</h1>'+
        '<table>'+
        '<tbody>'+
            '<tr v-for="to in todata" :datato="to">'+
                '<td>{{datato.tile1}}</td>'+
                '<td>{{datato.tile2}}</td>'+
                '<td>{{datato.tile3}}</td>'+
            '</tr>'+
            '</tbody>'+
        '</thead>'
});

第二段代码

var datas = new Vue({
el:"#app",
data:{
    parameter:{title:"hello vue js"},
    todata:[{
        tile1:"aaa",
        tile2:"www",
        tile3:"sss",
    },{
        tile1:"aaa",
        tile2:"www",
        tile3:"sss",
    },{
        tile1:"aaa",
        tile2:"www",
        tile3:"sss",
    }]
}
});

HTML

<div id="app" >
    <child-i :msg="parameter"></child-i>
</div>

其实我想做的很简单，就是想通过v-for指令，在子组件内部动态构造出一组tr和td的表格标签，我在运行的时候浏览器没有报错，但是标签里面却没有任何关于tr和td的标签，难道是我那里写错了？，希望大神可以指点一下，或给一个demo进行参考一下

解决方案

你都已经把msg传过去了，把todata也传过去啊…

这篇关于javascript - Vue新手，在组件中怎么使用v-for指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！