zoukankan      html  css  js  c++  java
  • vue之异步组件

    异步加载组件,在当前组件需要被加载时才会加载

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        </style>
    </head>
    <body>
        <div id="app">
            <App></App>
        </div>
        <script src="./vue.js"></script>
    // 2.设置type='module' <script type='module'> // import xxx from './modules.js'; const App = { data() { return { isShow: false } }, methods: { asyncLoad() { this.isShow = !this.isShow; } }, components: {
    // 1.()=>import导入 Test:()=>import('./Test.js') }, template: ` <div> <button @click='asyncLoad'>异步加载</button> <Test v-if='isShow'></Test> </div> `, } new Vue({ el: '#app', components: { App } }) </script> </body> </html>

      Test.js文件

    export default  {
        data() {
            return {
                msg: '异步'
            }
        },
        template: `
                    <h3>{{msg}}</h3>
                `
    
    }
    

      

  • 相关阅读:
    Shiro安全框架之集成 Web(下)
    Shiro安全框架之集成 Web(中)
    Shiro安全框架之集成 Web(上)
    01背包
    巴什博弈
    斐波那契博弈
    一. 至少转最多
    平面分割类问题
    求凸包(安德鲁算法)
    GCD和exGCD
  • 原文地址:https://www.cnblogs.com/shannen/p/13964750.html
Copyright © 2011-2022 走看看