美文网首页vue
VUE tab组件用is的例子

VUE tab组件用is的例子

作者: 抽疯的稻草绳 | 来源:发表于2020-09-28 22:33 被阅读0次
    <template>
      <div class="root">   
        <div  @click="comName='one'">一</div>
        <div  @click="comName='two'">二</div>
        <div @click="comName='three'">三</div>-->
         <component :is="comName"></component>
      </div>
    </template>
     
    <script>
    import one from './one'
    import two from './two'
    import three from './three'
    export default {
      components:{
        one,two,three
      },
      data() {
        return {
          comName:'one'
        };
      },
      methods: {
       
      },
    };
    </script>
    <style lang="stylus" scoped>
    .root {
      margin: 20px 100px;
      width 80%
      height 60%
      border 1px solid red
      a {
        margin-right 20px
        line-height 50px
      }
    }
    </style>
     
     
     
    <!-- 组件会在 `件名` 改变时改变 -->
    <component :is="组件名变量"></component>
     <ul>
      <li is='my-component'></li>
      </ul>
    

    相关文章

      网友评论

        本文标题:VUE tab组件用is的例子

        本文链接:https://www.haomeiwen.com/subject/rdajuktx.html