master

分支 (1)

管理

管理

master

HR
/
11.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <component :is="active"></component>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      // 之前学过 路由vue-router第一天的时候
      // component组件是vue为我们提供的一个组件，相当于是占位符，通过is属性来指定当前放哪个组件
      // 详情页
      // 后台数据 有的用户 文章 视频
      const articleCom = {
        template:`
          <div>文章内容</div>
        `
      }
      const videoCom = {
        template:`
          <div>视频内容</div>
        `
      }
      var vm = new Vue({
        el: '#app',
        data: {
          active:'articleCom'
        },
        methods: {},
        components:{
          articleCom,
          videoCom
        }
      })
    </script>
  </body>
</html>