vue tabバー切替コンポーネントの実装

1804 ワード



//     
import test1 from './test1'
import test2 from './test2'
import test3 from './test3'
export default {
  data () {
    return {
      //        
      currentComp: 'test1',
      //      li  
      isActive: '1',
      menu: [
        {
          // li     
          name: '    ',
          //   li         
          value: '1',
          //     li  ,      
          comp: 'test1'
        },
        {
          name: '    ',
          value: '2',
          comp: 'test2'
        },
        {
          name: '    ',
          value: '3',
          comp: 'test3'
        }
      ]
    }
  },
  //     
  components: {
    test1,
    test2,
    test3
  }
}



vueのisプロパティのプロパティは、isプロパティのラベルを使用すると、isのプロパティ値で現在のラベルがレンダリングされます.
たとえば、ulでのみliを包むことができますが、liにisプロパティを追加してliレンダリングのどのコンポーネントを決定することができます.