zoukankan      html  css  js  c++  java
  • vue动态切换视图

    big.vue

    <template>
    <div>
    big
    <p>{{view}}</p>
    <!--标准规范-->
    <component :is='view'></component>
    <button @click="changeView">切换组件</button>
    <button @click="changeViewLife">切换组件2</button>

    <!--做到一个缓存效果,实时更新的数据不能用-->
    <keep-alive>
    <component :is='view'></component>
    </keep-alive>
    </div>
    </template>

    <script>
    import Small1 from './small1'
    import Small2 from './small2'
    export default{
    name:'big',
    data(){
    return{
    view:'Small1',
    flag:true
    }
    },
    methods:{
    changeView(){
    this.view = 'Small2'
    },
    changeViewLife(){
    if(this.flag){
    this.view = 'Small1'
    this.flag = false
    }else{
    this.view = 'Small2'
    this.flag = true
    }
    }
    },
    components:{
    Small1,
    Small2
    }
    }
    </script>

    <style>
    </style>

    small1.vue

    <template>
    <div>small1</div>
    </template>

    <script>
    export default{
    name:'small1',
    data(){
    return{

    }
    },
    methods:{

    }
    }
    </script>

    <style>
    </style>

    small2.vue

    <template>
    <div>small2</div>
    </template>

    <script>
    export default{
    name:'small2',
    data(){
    return{

    }
    },
    methods:{

    }
    }
    </script>

    <style>
    </style>

  • 相关阅读:
    三种省市级联下拉列表的写法
    三种省市级联下拉列表的写法
    SQL经典试题(mysql)
    60行代码俄罗斯方块
    ibatis xml中配置信息详解
    60行代码俄罗斯方块
    xinetd
    csh and tcsh
    xinetd restart
    bash sh
  • 原文地址:https://www.cnblogs.com/qiyc/p/9114398.html
Copyright © 2011-2022 走看看