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">
Vue.component('tab-zy1', {
template: '
});
Vue.component('tab-zy2', {
template: '
});
Vue.component('tab-zy3', {
template: '
});
Vue.component('tab-zy4', {
template: '
});
Vue.component('tab-zy5', {
template: '
});
Vue.component('tab-zy6', {
template: '
});
Vue.component('tab-zy7', {
template: '
});
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();
}
}
});
