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();

}

}

});

總結

以上是生活随笔為你收集整理的vue里面is_vue中的is的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。