动态组件
在组合标签中比如table,不通过动态组件来渲染模板的情况下会发生模板渲染错位的问题.
<body>
<div id="app">
<table>
<test></test>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
* 动态组件:在HTML标签里面用is属性来引入组件
*
* 在组合标签中比如table,不通过动态组件来渲染模板的情况下会发生模板渲染错位的问题.
*/
var test={
template:`
<tr><td>{{list[0]}}</td></tr>`,
data:function(){
return{
list:["html","css","js"]
}
}
}
var vm = new Vue({
el:"#app",
components:{
test
}
})
</script>
</body>
1.jpg
我们可以在HTML标签里面用is属性来引入组件,解决这个问题
<div id="app">
<table>
<tr is="test"></tr>
</table>
</div>
1.jpg
网友评论