利用component组件和is属性实现动态组件


<html lang="en">

<head>
    <title>title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/vue2.js">script>
head>

<body>
    <div id="app">
        <ul>
            <li @click='test="che"'><a href="#">车厘子a>li>
            <li @click='test="mi"'><a href="#">猕猴桃a>li>
        ul>
        
        <component :is='test'>component>
    div>
    <script>
        Vue.component('che', {
            template: `

这是车厘子

`
}) Vue.component('mi', { template: `

这是猕猴桃

`
}) var vm = new Vue({ el: '#app', data: { test: '' } })
script> body> html>

你可能感兴趣的:(Vue)