zoukankan      html  css  js  c++  java
  • vue动态组件

    1.第一层

    <div id="app">
            <div class="left">
                <ul>
                    <li @click='ul="bingren"'>我的病人</li>
                    <li @click='ul="bingli"'>电子病历</li>
                </ul>
            </div>
            <div class="right">
                <component :is='ul'></component>
            </div>
        </div>
     
    //vue实例
    var app = new Vue({
            el: '#app',
            data: {
                ul: 'bingren',
            }
        })

    2.第二层

     Vue.component('bingren', {
            template: '<div>我是病人</div>'
        }), Vue.component('bingli', {
            template: `<div><button @click='dz="dianz"'>电子病历</button> <button @click='dz="add"'>添加病例</button><component :is='dz'></component></div>`,
            data() {
                return {
                    dz: 'dianz'
                }
            }
        }), Vue.component('dianz', {
            template: '<div>电子病历111</div>'
        }), Vue.component('add', {
            template: '<div>电子病历222</div>'
        })
  • 相关阅读:
    HDU-5384
    UVALive 5099
    ZOJ-2753
    HUD-5379
    HDU-5360
    HDU-5351
    HDU-5335
    HDU-5317
    HDU-2487
    常用十六进制颜色对照表代码查询
  • 原文地址:https://www.cnblogs.com/wangyue6/p/13033308.html
Copyright © 2011-2022 走看看