Heim > Fragen und Antworten > Hauptteil
Der Code lautet wie folgt:
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>'
});
Zweiter Code
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>
Eigentlich möchte ich die v-for-Anweisung verwenden, um dynamisch einen Satz von tr- und td-Tabellen-Tags innerhalb der Unterkomponente zu erstellen. Wenn ich sie ausführe, meldet der Browser keinen Fehler , aber im Tag steht nichts darüber. Habe ich die Bezeichnungen für tr und td falsch geschrieben? Ich hoffe, der Meister kann einige Ratschläge geben oder eine Demo als Referenz bereitstellen
世界只因有你2017-05-19 10:39:59
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>'
});