结果展示:
1. methods的实现方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" placeholder="请输入姓" v-model="firstName"><br/>
名:<input type="text" placeholder="请输入名" v-model="lastName"><br/>
全名:{{fullName()}}
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el: "#root",
data(){
return {
firstName:"",
lastName:"",
}
},
methods:{
fullName(){
return this.firstName + this.lastName
}
}
})
</script>
</html>
在展示全名的信息时可以调用方法,但模板中要以xxx()的形式出现,才能回调方法。
2. 插值语法实现方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" placeholder="请输入姓" v-model="firstName"><br/>
名:<input type="text" placeholder="请输入名" v-model="lastName"><br/>
全名:{{firstName+lastName}}
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el: "#root",
data(){
return {
firstName:"",
lastName:"",
}
},
})
</script>
</html>