vue中is的使用

:is做用

1.動態切換不一樣組件

<div id="app">
    <button @click="changeComponent('component1')">A</button>
    <button @click="changeComponent('component2')">B</button>
     <!-- 經過is特性,能夠動態切換當前組件  -->
    <div v-bind:is="currentView"></div>
      <!-- v-bind:動態綁定屬性  -->
</div>

//引入組件
import component1 from '../....';
import component2 from '../....';
export default {
 data(){
 return {
    currentView:'component1'
     //當前組件
  } 
 },
 methods:{
     changeComponent(component){
     this.currentView=component;
         //點擊按鈕,動態切換不一樣的組件
    }
 }
 components:{
     component1,
     component2
 }
} 

2.解析DOM模板 : 解除限制元素

有些 HTML 元素，諸如 <ul>、<ol>、<table> 和 <select>，對於哪些元素能夠出如今其內部是有嚴格限制的。而有些元素，諸如 <li>、<tr> 和 <option>，只能出如今其它某些特定的元素內部。

這會致使咱們使用這些有約束條件的元素時遇到一些問題。例如：

<table>
      <my-component></my-component>
</table>
<!-- 這個自定義組件<my-component>會被做爲無效的內容提高到外部，並致使最終渲染結果出錯。 -->

<table> <tr is="my-component"></tr> </table> <!--增長is特性來擴展，從而達到能夠在這些受限制的html元素中使用 -->