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

    下面看下vue component动态组件(详情看vue.js官网动态组件)

     动态组件

    通过component标签 的is属性来进行组件的切换

    is的属性值决定要显示的组件,所以将is的属性值设置为data中的值,以便于动态变化

    1
    2
    3
    4
    5
    6
    7
    <template>
      <div class="app">
          <component :is="组件名称">
      
          </component>
      </div>
    </template>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>动态组件</title>
      <script src="bower_components/vue/dist/vue.js"></script>
      <style>
      </style>
    </head>
    <body>
      <div id="box">
        <input type="button" @click="a='aaa'" value="aaa组件">
        <input type="button" @click="a='bbb'" value="bbb组件">
        <component :is="a"></component> <!-- 动态组件-->
      </div>
     
      <script>
        var vm=new Vue({
          el:'#box',
          data:{
            a:'aaa'
          },
          components:{
            'aaa':{
              template:'<h2>我是aaa组件</h2>'
            },
            'bbb':{
              template:'<h2>我是bbb组件</h2>'
            }
          }
        });
     
      </script>
    </body>
    </html>
  • 相关阅读:
    第一周例行报告psp
    作业要求 2018091-2 博客作业
    20181011-1第一周例行报告
    20180912-2第一周博客作业
    Elasticsearch
    centos7 安装Hadoop-2.6.0-cdh5.16.1.tar.gz
    centos7安装hadoop2.7.7
    centos7安装jdk8
    专业知识4
    专业知识3
  • 原文地址:https://www.cnblogs.com/fsg6/p/14383449.html
Copyright © 2011-2022 走看看