Vue3中的监听器
Vue3 监听器
2023-06-13 09:12:24 时间
tips:
- 在Vue3中,我们可以可以使用监听器去监听某个数据发生改变,然后可以触发函数
- watch代表监听器,里面可以放入函数,函数名称对应要监听的数据
- 监听器函数支持两个参数,第一个是新值,第二个是老值
- 监听器可以监听到data和computed里面的数据
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="leo">
<input type="button" value="go" @click="change"/>
{{content}}
</div>
<script>
Vue.createApp({
data(){
return {
"content":"hello"
}
},
"methods": {
change(){
this.content='Vue3'
}
},
"watch": {
content(newValue, oldValue){
console.log(newValue,oldValue)
}
}
}).mount("#leo")
</script>
</body>
</html>
相关文章
- vue3+ts 使用高德地图JSAPI 加载API并初始化地图
- Vue3模板语法--缩写
- Vue3中计算属性的Setter
- 你还不知道vue3中依赖收集和派发更新的实现逻辑吗?那你就out啦~还不快来看!
- Vue3.0商店后台管理系统项目实战-vue3搭配Element Plus框架使用
- Vue3响应式助你轻松实现国际化
- vue3实战-完全掌握ref、reactive
- 开心档之Vue3
- Vue3+TS的项目中使用NProgress进度条
- Vue3源码学习:搭建monorepo开发环境(一)
- VUE3/TS/TSX入门手册指北
- vue3报错 ERROR Failed to compile with 1 errorYou may use special comments to disab