使用 watch 监听文本框数据的变化|学习笔记

简介: 快速学习使用 watch 监听文本框数据的变化

开发者学堂课程【Vue.js 入门与实战使用 watch 监听文本框数据的变化】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8205


使用 watch 监听文本框数据的变化


本节来换一个思路,也能实现文本框的数据变化:


一、范例:视觉效果图及代码展示

<body><div id="app">us2<input type="text" v-mode1="firstname">+<input type="text" v-model="lastname">=<input type="text" v-mode1="fullname"></div><script>

//创建vue实例,得到viewModelvar vm =new vue( {el: #app,data: {firstname :lastname:fullname : ''),methods: i,I

watch:{

//使用这个属性,可以监视  data 中指定数据的变化,然后触发这个 watch 中对应的 function 处理函数,就是指 date 上面所有的数据,都可以用 watch 来达到监视。

‘firstname’:function(newVal,oldVal){

//Console.log(‘监视到了 firstname 的变化’)

//This.fullname = this.firstname + ‘-’ +this.lastname

//Console.log(newVal + ‘---’ +oldVal)

This.fullname = newVal +’--’ + this.lastname

},

‘lastname’:function(newVal){

This.fullname = this.lastname +’-’+ newVal}

}

视觉效果图如下:

1666939804410.jpg

这就是使用 watch 监听来实现名称案例。

相关文章
|
4月前
|
JavaScript 数据处理
当数据发生变化时,`watch`函数是如何被触发的?
当数据发生变化时,`watch`函数是如何被触发的?
53 3
|
4月前
|
小程序 UED 开发者
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
135 0
|
4月前
|
小程序
在uniapp中监听globalData中的值变化
在uniapp中监听globalData中的值变化
246 0
|
2月前
|
开发框架 监控 前端开发
使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题
使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题
|
2月前
|
JavaScript
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
173 0
|
4月前
当监听的属性是对象的引用时,`watch`选项是否会触发监听?
当监听的属性是对象的引用时,`watch`选项是否会触发监听?
30 2
|
4月前
|
JavaScript
如何使用`watch`选项来监听特定属性的变化?
如何使用`watch`选项来监听特定属性的变化?
32 0
|
4月前
|
JavaScript API
在Vue中,有哪些方法可以监听元素的状态变化?
在Vue中,有哪些方法可以监听元素的状态变化?
269 2
|
4月前
如何监听vuex中的变量参数变化,用watch!
如何监听vuex中的变量参数变化,用watch!
|
监控 JavaScript
Vue中可以使用watch属性监听select元素选项的变化吗?
Vue中可以使用watch属性监听select元素选项的变化吗?
581 0