<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>監聽器</title>
????<script?src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div?id="root">
</div>
<script>
????new?Vue({
????????el:?"#root",
????????template:?`<div?>
?????????????????????<input?v-model="firstName">
?????????????????????<input?v-model="lastName">
?????????????????????<div>{{fullName}}</div>
?????????????????????<div>{{number}}</div>
???????????????????</div>`,
????????data:?{
????????????firstName:?"",
????????????lastName:?'',
????????????number:?0,
????????},
????????computed:?{
????????????fullName:?function?()?{
????????????????return?this.firstName?+?this.lastName
????????????}
????????},
????????match:?{
????????????fullName:?function?()?{
????????????????console.log('數據發生了改變')
????????????????this.number++
????????????}
????????}
????})
</script>
</body>
</html>
2019-08-26
watch