javascript - Vue新手,在组件中怎么使用v-for指令
ringa_lee
ringa_lee 2017-05-19 10:37:59
[JavaScript讨论组]

代码如下:

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

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

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

ringa_lee
ringa_lee

ringa_lee

全部回复(2)
阿神

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

世界只因有你

HTML

<p id="app" >
    <child-i :msg="parameter" :datato="todata"></child-i>
</p>

JS

Vue.component('child-i',{
props:['msg','datato'],
template:'<h1>{{msg.title}}</h1>'+
        '<table>'+
        '<tbody>'+
            '<tr v-for="to in datato">'+
                '<td>{{to.tile1}}</td>'+
                '<td>{{to.tile2}}</td>'+
                '<td>{{to.tile3}}</td>'+
            '</tr>'+
            '</tbody>'+
        '</thead>'
});
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号