<!DOCTYPE html>>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_methods实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓：<input type="text" v-model="lastname"><br/><br/>
名：<input type="text" v-model="firstname"><br/><br/>
全名：<span>{{fullname()}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
lastname:'张',
firstname:'三'
},
methods:{
fullname(){
return this.lastname + '-' + this.firstname
}
}
})
</script>
</html>