Tùy chọn 'xem' Vue
Ví dụ
Sử dụng trình theo dõi bên trong tùy chọn watch
để không thể chọn giá trị trong khoảng từ 20 đến 70 bằng <input type="range">
.
export default {
data() {
return {
rangeVal: 4
};
},
watch: {
rangeVal(val) {
if( val>20 && val<70) {
if(val<40){
this.rangeVal = 20;
}
else {
this.rangeVal = 70;
}
}
}
}
};
Chạy ví dụ »Định nghĩa và cách sử dụng
Tùy chọn watch
là một đối tượng có tất cả người theo dõi được khai báo trên phiên bản Vue.
Trình theo dõi là một hàm có cùng tên với thuộc tính dữ liệu hoặc thuộc tính được tính toán. Trình theo dõi được gọi tự động bất cứ khi nào thuộc tính có cùng tên đó bị thay đổi.
Khi một trình theo dõi được gọi, các giá trị mới và trước đó sẽ có sẵn làm đối số cho hàm theo dõi.
Trình theo dõi cũng có thể là một đường dẫn được phân cách bằng dấu chấm, chẳng hạn như tiger.weight
, để trình theo dõi chỉ được gọi khi thuộc tính weight
của đối tượng tiger
bị thay đổi.
Lưu ý: Nên tránh các hàm mũi tên khi khai báo trình theo dõi vì không thể truy cập phiên bản Vue từ bên trong hàm như vậy bằng cách sử dụng từ khóa this
.
Khi viết trình theo dõi bằng cú pháp đối tượng (xem ví dụ bên dưới), có sẵn các tùy chọn sau:
Option | Description |
---|---|
handler | This is where the watch function is written. |
'method name' | A watcher can be set up to call a method by providing the method name as a string. |
deep | Default value is 'false'. If the watcher is deep, it also reacts to changes further down in the property the watcher is set up to watch. |
immediate | Default value is 'false'. Triggers the watcher immediately after it is created. The old value will be 'undefined' the first time the watcher is triggered when 'immediate' is set to 'true'. |
flush | Default value is 'pre'. Specify when to run the callback function relative to when the component is rendered. Possible values are 'pre', 'post' and 'sync'. Use this flush option with caution. |
onTrigger/onTrack | Used for debugging. Only works in development mode. |
Lưu ý: Người theo dõi cũng có thể được tạo bằng phương thức $watch()
.
Thêm ví dụ
Ví dụ
Sử dụng trình theo dõi với cú pháp đối tượng.
<template>
<h2>Example watch Option</h2>
<p>The 'rangeVal' watcher is written with the object syntax, with immediate: true, so that rangeVal is moved to '70' when the page first loads:</p>
<input type="range" v-model="rangeVal">
<p>rangeVal: <span>{{ rangeVal }}</span></p>
</template>
<script>
export default {
data() {
return {
rangeVal: 40
};
},
watch: {
rangeVal: {
handler(val) {
if (val > 20 && val < 70) {
if (val < 40) {
this.rangeVal = 20;
}
else {
this.rangeVal = 70;
}
}
},
immediate: true
}
}
};
</script>
<style>
span {
padding: 3px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
background-color: lightgreen;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn về Vue: Người theo dõi Vue
Hướng dẫn Vue: Chỉ thị Vue v-model
Tham khảo Vue: Phương thức Vue $watch()