zoukankan      html  css  js  c++  java
  • 动态地绑定到它的 is 特性,可以实现动态组件

    前面的话

      让多个组件使用同一个挂载点,并动态切换,这就是动态组件。本文将详细介绍Vue动态组件

    概述

      通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件

    <div id="example">
      <button @click="change">切换页面</button>
      <component :is="currentView"></component>
    </div>
    <script>
    var home = {template:‘<div>我是主页</div>‘};
    var post = {template:‘<div>我是提交页</div>‘};
    var archive = {template:‘<div>我是存档页</div>‘};
    new Vue({
      el: ‘#example‘,
      components: {
        home,
        post,
        archive,
      },
      data:{
        index:0,
        arr:[‘home‘,‘post‘,‘archive‘],
      },
      computed:{
        currentView(){
            return this.arr[this.index];
        }
      },
      methods:{
        change(){
          this.index = (++this.index)%3;
        }
      }
    })
    </script>

    也可以直接绑定到组件对象上

    <div id="example">
      <button @click="change">切换页面</button>
      <component :is="currentView"></component>
    </div>
    <script>
    new Vue({
      el: ‘#example‘,
      data:{
        index:0,
        arr:[
          {template:`<div>我是主页</div>`},
          {template:`<div>我是提交页</div>`},
          {template:`<div>我是存档页</div>`}
        ],
      },
      computed:{
        currentView(){
            return this.arr[this.index];
        }
      },
      methods:{
        change(){
          this.index = (++this.index)%3;
        }
      }
    })
    </script>
  • 相关阅读:
    nio的学习
    并发编程学习(二)
    并发编程学习(一)
    linux基础知识-常用命令
    linux基础知识-目录结构
    springcloud的config
    zuul学习
    hystrix学习
    feign学习
    ribbon学习
  • 原文地址:https://www.cnblogs.com/moxiaowohuwei/p/7998490.html
Copyright © 2011-2022 走看看