Vue Watchers 简介和使用
在 Vue 中, Watch 让您通过注册一个回调来观察一个值,当值发生变化时,Vue 将调用该回调。
例如,假设您有一个 select
标签 要求用户在选项“A”、“B”和“C”之间进行选择,并且您希望实现一个“撤消”按钮,该按钮将撤消用户所做的最后更改。 您可以通过在 value
选择必须使用 v-model
。
const app = new Vue({
data: () => ({ value: 'A', oldValue: 'A' }),
// The `watch` property is a map from watched properties to callbacks
watch: {
value: function(newValue, oldValue) {
console.log('Name changed from', oldValue, 'to', newValue);
this.oldValue = oldValue;
}
},
template: `
<div>
<select v-model="value">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<button v-on:click="value = oldValue">Undo</button>
</div>
`
});
观察者的一个常见用例是在值更改时将更改持久保存到服务器。 例如,假设您想在每次用户更改时发送一个 HTTP 请求 value
。你可以注册一个观察者 value
,并在 watch
回调如下图。
const app = new Vue({
data: () => ({ value: 'A', saved: false }),
watch: {
value: function() {
const body = JSON.stringify(this.data);
fetch('http://httpbin.org/post', { method: 'POST', body }).
then(() => { this.saved = true; });
}
},
template: `
<div>
<select v-model="value">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div v-if="saved">Saved!</div>
</div>
`
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
上一篇: Vue Props 组件传值教程
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论