方法一:文本框监听,使用@input
事件文章来源:https://www.toymoban.com/news/detail-692260.html
<template>
<view>
<input type="text" v-model="wip_entity_name" @input="handleInputChange" />
</view>
</template>
<script>
export default {
data() {
return {
wip_entity_name: '' // 文本框绑定的数据
};
},
methods: {
handleInputChange() {
// 执行需要在文本框值改变时执行的方法
console.log('文本框的值发生改变');
// 调用其他方法
this.otherMethod();
},
otherMethod() {
// 实现其他方法的逻辑
console.log('执行其他方法');
}
}
};
</script>
方法二:使用watch监听属性(很好解决了文本框中数据非手输时监听不到数据变化)文章来源地址https://www.toymoban.com/news/detail-692260.html
<template>
<view>
<input type="text" v-model="wip_entity_name" />
</view>
</template>
<script>
export default {
data() {
return {
wip_entity_name: '' // 文本框绑定的数据
};
},
watch: {
wip_entity_name(newVal, oldVal) {
// 监听文本框值的改变
if (newVal !== oldVal) {
// 执行需要在文本框值改变时执行的方法
console.log('文本框的值发生改变');
// 调用其他方法
this.otherMethod();
}
}
},
methods: {
otherMethod() {
// 实现其他方法的逻辑
console.log('执行其他方法');
}
}
};
</script>
到了这里,关于uni-app:监听数据变化(watch监听、@input事件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!