vue框架中特殊的attribute属性:is的使用

: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]
    },
 }