:is属性
根据HTML规范,table、ul、ol、select等元素标签只能包含特定元素,当模板标签在使用有限制性的元素,在渲染时就会出现bug。如下例所示:
<div id="root">
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template: '<tr><td>this is a row</td></tr>'
})
var vm=new Vue({
el: "#root"
})
</script>
渲染结果如下:
渲染完成后,tr元素放在了table元素的外部。因为tbody元素内部只能放tr标签,上例在table标签内部写了row标签就会引发bug。引入is属性后上例中DOM部分可以这样写
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
这样,便可以正确的渲染:
例子
可以用来切换不同的tab栏页面
<div :is='pageName' ></div>
data () {
return {
index:0,
pageNameMap: {
0: 'enterpriseBaseInfo',
1: 'other',
}
}
},
computed: {
pageName () {
return this.pageNameMap[this.index]
},
}