vue里面is_vue中的is

is有两种用法：

第一种就是在一些标签中像ul，ol，table等使用自定义的一些组件，浏览器的解析是有问题的，甚至报错。而添加这个属性之后就可正常使用,但是我测试是可以用的，可能是版本的问题，不知道什么原因。

第二种也是非常好用的一种，用于组件的切换，在一些导航栏上是非常好用的具体例子如下

这里是动态组件

.left{pasition:fixed;width:190px;}

.left ul li{height:40px;width:100%;margin-top:10px;background:pink;}

.right{width:500px;height:200px;position:relative;top:-250px;left:190px;background:red;}

• v-for="tab in tabs"

  v-bind:key="tab.name"

  v-bind:class="['tab-button',{active:currentTab === tab.name}]"

  v-on:click="currentTab = tab.name"

  >

  {{ tab.item }}

v-bind:is="currentTabComponent"

class="tab">

hahahahhhhh

Vue.component('tab-zy1', {

template: '

我是zy1 页面

'

});

Vue.component('tab-zy2', {

template: '

我是zy2页面

'

});

Vue.component('tab-zy3', {

template: '

我是zy3 页面

'

});

Vue.component('tab-zy4', {

template: '

我是zy4页面

'

});

Vue.component('tab-zy5', {

template: '

我是zy5 页面

'

});

Vue.component('tab-zy6', {

template: '

我是zy6 页面

'

});

Vue.component('tab-zy7', {

template: '

我是zy7 页面

'

});

new Vue({

el: '#container',

data: {

currentTab: 'zy1',

tabs: [{name:'zy1',item:'物理资源'},{name:'zy2',item:'存储资源'} ,{name:'zy3',item:'客户端'},{name:'zy4',item:'存储资源'},{name:'zy5',item:'系统管理'},{name:'zy6',item:'性能统计'},{name:'zy2',item:'监控中心'}],

},

computed: {

currentTabComponent: function () {

return 'tab-' + this.currentTab.toLowerCase();

}

}

});