VUE3菜鸟教程:监听属性watch响应数据的变化

2021-08-2015:16:47WEB前端开发Comments1,389 views字数 1855阅读模式

Vue3 监听属性 watch,我们可以通过 watch 来响应数据的变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html

以下实例通过使用 watch 实现计数器:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html

实例

<div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">点我</button> </div> <script> const app = { data() { return { counter: 1 } } } vm = Vue.createApp(app).mount('#app') vm.$watch('counter', function(nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!'); }); </script>

以下实例进行千米之间的换算:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html

实例

<head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id = "app"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <script> const app = { data() { return { kilometers : 0, meters:0 } }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = this.kilometers * 1000 }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } } vm = Vue.createApp(app).mount('#app') vm.$watch('kilometers', function (newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue; }) </script>

点击 "尝试一下" 按钮查看在线实例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html

以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了 data 对象的两个监控方法: kilometers 和 meters。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html

当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。可以看下如下视频演示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html

异步加载中使用 watch

异步数据的加载 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html

以下实例我们使用 axios 库,后面会具体介绍。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html

实例

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>
const watchExampleVM = Vue.createApp({
data() {
return {
question: '',
answer: '每个问题结尾需要输入 ? 号。'
}
},
watch: {
// 每当问题改变时,此功能将运行,以 ? 号结尾
question(newQuestion, oldQuestion) {
if (newQuestion.indexOf('?') > -1) {
this.getAnswer()
}
}
},
methods: {
getAnswer() {
this.answer = '加载中...'
axios
.get('https://yesno.wtf/api')
.then(response => {
this.answer = response.data.answer
})
.catch(error => {
this.answer = '错误! 无法访问 API。 ' + error
})
}
}
}).mount('#watch-example')
</script>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22229.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/22229.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定