Vue監聽器watch的6種使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue監聽器watch總結</title>
<script crossorigin="anonymous" integrity="sha384-+jvb+jCJ37FkNjPyYLI3KJzQeD8pPFXUra3B/QJFqQ3txYrUPIP1eOfxK4h3cKZP" src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="test1">
<h3>用法1：常見用法</h3>
<input v-model="message">
<span>{{showMessage}}</span>
</div>
<div id="test2">
<h3>用法2：綁定方法</h3>
<input v-model="message">
<span>{{showMessage}}</span>
</div>
<div id="test3">
<h3>用法3：deep + handler</h3>
<input v-model="deepMessage.a.b">
<span>{{showMessage}}</span>
</div>
<div id="test4">
<h3>用法4：監聽對象屬性</h3>
<input v-model="deepMessage.a.b">
<span>{{showMessage}}</span>
</div>
<div id="test5">
<h3>用法5：immediate</h3>
<input v-model="message">
<span>{{showMessage}}</span>
</div>
<div id="test6">
<h3>用法6：綁定多個handler</h3>
<input v-model="message">
<span>{{showMessage}}</span>
</div>
<script>
new Vue({
el: '#test1',
watch: {
message(value) {
this.showMessage = value
}
},
data() {
return {
message: 'Hello world',
showMessage: ''
}
}
})
new Vue({
el: '#test2',
watch: {
message: 'handleMessage'
},
data() {
return {
message: 'Hello world',
showMessage: ''
}
},
methods: {
handleMessage(value) {
this.showMessage = value
}
}
})
new Vue({
el: '#test3',
watch: {
deepMessage: {
handler: 'handleDeepMessage',
deep: true
}
},
data() {
return {
deepMessage: {
a: {
b: 'Deep Message'
}
},
showMessage: ''
}
},
methods: {
handleDeepMessage(value) {
this.showMessage = value.a.b
}
}
})
new Vue({
el: '#test5',
watch: {
message: {
handler: 'handleMessage',
immediate: true
}
},
data() {
return {
message: 'Hello world',
showMessage: ''
}
},
methods: {
handleMessage(value) {
this.showMessage = value
}
}
})
new Vue({
el: '#test6',
watch: {
message: [{
handler: 'handleMessage1'
},
'handleMessage2',
function(value) {
this.showMessage = this.showMessage + '@@@'
}]
},
data() {
return {
message: 'Hello world',
showMessage: ''
}
},
methods: {
handleMessage1(value) {
this.showMessage = value
},
handleMessage2(value) {
this.showMessage = this.showMessage + '###'
}
}
})
new Vue({
el: '#test4',
watch: {
'deepMessage.a.b': 'handleMessage'
},
data() {
return {
deepMessage: {
a: {
b: 'Hello world'
}
},
showMessage: ''
}
},
methods: {
handleMessage(value) {
this.showMessage = value
}
}
})
</script>
</body>
</html>
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)