console
var componentA={
template:`<img src="http://img01.sogoucdn.com/app/a/100520024/2dca236d81c5fc584cbc7c910b9aacf0">`
}
var componentB={
template:`<img src="http://img01.sogoucdn.com/app/a/100520024/38b410e1d1e0a78280ef4515196fec3e">`
}
var componentC={
template:`<img src="http://img04.sogoucdn.com/app/a/100520024/646e5f06e9b545a73c1503348f69dabf">`
}
var app=new Vue({
el:'#app',
data:{
who:'componentA'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
},
methods:{
changeComponent:function(){
if(this.who=='componentA'){
this.who='componentB';
}else if(this.who=='componentB'){
this.who='componentC';
}else{
this.who='componentA';
}
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-4</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
<h1>component-4</h1>
<hr>
<div id="app">
<button @click="changeComponent">changeComponent</button><br>
<component v-bind:is="who"></component>
</div>
body{
background:red;
padding:15px;
margin:0;
}
#changesrc{
margin:50px;
}
#Imgs{
width:300px;
height:250px;
border:1px solid red;
margin-top:5px;
overflow:hidden;
}
img{
width:300px;
height:350px;
}