<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./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><br>
年龄:<span>{{Date}}</span>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
firstName: '三',
lastName: '张',
fullName: '张-三',
year: 1998,
month: 10,
day: 11
},
computed: {
Date() {
return this.year + '年' + this.month + '月' + this.day + '日';
}
},
watch: {
firstName(val) {
//firstName被管理,所以写成普通函数,this指向vm
console.log(this);
//此对象被js管理不被vm管理,所以写成=>函数,
// 假如写成普通函数那么this将指向window,
// 这里写成=>函数则指向vm
setTimeout(() => {
console.log(this); //指向Vue
this.fullName = this.lastName + val;
}, 1000);
},
lastName(val) {
this.fullName = val + this.firstName;
}
}
});
</script>
07-08
326
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交