uni-app:监听数据变化(watch监听、@input事件)

方法一:文本框监听,使用@input事件

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监听属性(很好解决了文本框中数据非手输时监听不到数据变化)

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>
相关推荐
白兰地空瓶14 小时前
🚀你以为你在写 React?其实你在“搭一套前端操作系统”
前端·react.js
爱上妖精的尾巴14 小时前
6-4 WPS JS宏 不重复随机取值应用
开发语言·前端·javascript
似水流年QC15 小时前
深入探索 WebHID:Web 标准下的硬件交互实现
前端·交互·webhid
陪我去看海15 小时前
测试 mcp
前端
speedoooo16 小时前
在现有App里嵌入一个AI协作者
前端·ui·小程序·前端框架·web app
影子打怪16 小时前
uniapp项目中,通过renderjs的方式展示地图,及其标点、轨迹展示、轨迹回放
uni-app
全栈胖叔叔-瓜州16 小时前
关于llamasharp 大模型多轮对话,模型对话无法终止,或者输出角色标识User:,或者System等角色标识问题。
前端·人工智能
三七吃山漆16 小时前
攻防世界——wife_wife
前端·javascript·web安全·网络安全·ctf
用户479492835691516 小时前
面试官问"try-catch影响性能吗",我用数据打脸
前端·javascript·面试
GISer_Jing16 小时前
前端营销技术实战:数据+AI实战指南
前端·javascript·人工智能