vue-day11--methods实现名字案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>methods实现名字案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>欢迎来带{{name}}学习</div>
姓：<input type="text" v-model="firstName" /><br />
名：<input type="text" v-model="lastName" /><br />
全名：<span>{{fullName()}}</span><br />
</div>
</body>

<script type="text/javascript">
new Vue({
el: "#root",
data: {
name: "尚硅谷",
firstName: "张",
lastName: "三",
},
methods: {
fullName() {
return this.firstName + "-" + this.lastName;
},
},
});
</script>
</html>
 
method 没有缓存，computed 有缓存
posted @ 2023-07-09 19:24  雪落无痕1  阅读(28)  评论(0)    收藏  举报