1.:is特性进行动态内容切换
<div id="app">
<button @click="changeComponent('component1')">A</button>
<button @click="changeComponent('component2')">B</button>
//点击按钮进行数据切换
<div :is="currentView"></div>
//内容展示的地方
</div>
//引入组件
import component1 from '../component1';
import component2 from '../compnent2';
export default {
data(){
return {
currentView:'component1'
//当前组件(默认组件)
}
},
methods:{
changeComponent(component){
this.currentView=component;
//通过点击不同的按钮对currentVIew进行不同的赋值,从而达到内容的变化
}
}
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元素中使用 -->