Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>动态组件的使用方法</title>
</head>
​
<body>
<style>
#app{
    border: 1px solid;
    padding:10px;
    text-align: center;
}
</style>
​
<div id="app">
    <component :is="thisView"></component>
​
    <button @click="handleView('A')">第1句</button>
    <button @click="handleView('B')">第2句</button>
    <button @click="handleView('C')">第3句</button>
    <button @click="handleView('D')">第4句</button>
​
</div>
​
​
<script>
// 需求： 点击不同按钮，切换不同视图
var app = new Vue({
    el: '#app',
    components:{
        'compA':{
            template:'<div>离离原上草</div>'
        },
        'compB':{
            template:'<div>一岁一枯荣</div>'
        },
        'compC':{
            template:'<div>野火烧不尽</div>'
        },
        'compD':{
            template:'<div>春风吹又生</div>'
        }
    },
​
    methods:{
        handleView:function(tag){
            this.thisView = 'comp' + tag
        }
    },
​
    data:{
        thisView:'compA'
    }
})
​
​
</script>    
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lovexwupro
0viewers