<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../js_script/vue-2.3.0.js"></script>
<script>
var Home = Vue.component('Home', {
template: `<div>
<div>Home</div>
<div>{{age}}</div>
</div>`,
props: ['age'],
data: function() {
return {
name: 'home'
}
}
});
var Xman = Vue.component('Home', {
template: `<div>
<div>Xman</div>
<div>{{age}}</div>
</div>`,
props: ['age'],
data: function() {
return {
name: 'xMan'
}
}
});
</script>
</head>
<body>
<div id="app">
<p>
<input type="radio" v-model="current" value="home" />
<input type="radio" v-model="current" value="xman" />
</p>
<component :is="current" :age="age"></component>
</div>
<script>
new Vue({
el: '#app',
data: {
current: 'home',
age: 15
},
components: {
home: Home,
xman: Xman
}
});
</script>
</body>
</html>
