vue.js中的基础知识

动态类名绑定：

<span :class="[{top:(item.top === true)},{good:(item.good === true)},}]"></span>

动态组件

VUE给我们提供了一个元素叫component，使用is特性来实现动态的挂载不同的组件。

<div id="app">
  <component :is="myComponent"></component>
  <button @click="changeComponent('a')">第一句的组件</button>
  <button @click="changeComponent('b')">第二句的组件</button> 
</div>

Vue.component('a-component',{
  template: '<h1>春眠不觉晓，</h1>',              
},)
Vue.component('b-component',{
  template: '<h1>处处闻啼鸟。</h1>',
},)

new Vue({
  el: '#app',
  data() {
    return {
      curIndex: 'a',
      myComponent: 'a-component',
    };
  },
  methods: {
    changeComponent(value) {
      if (value === this.curIndex) return;
      this.curIndex = value;
      this.myComponent = this.curIndex + '-component';
    },
  },            
})