watch避坑,使用computed进行处理数据

这篇具有很好参考价值的文章主要介绍了watch避坑,使用computed进行处理数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

业务场景:在vue中监听el-input 中的字数有没有超过60,如果超过60字时将60后面的字变为 “>>” 符号,以此实现预览苹果手机推送摘要场景。

  • 错误:开始的逻辑是使用watch监听,检查length超过60直接 加上符号,如下:

    watch: {
        dataInfo: {
            handler(val) {
              if(val.length>60) {
                this.dataInfo.description = val.concat('>>')
              }
            },
            deep: true
          }
    }
    
    // ERROR: You may have an infinite update loop in watcher with expression。
    // 看了一下错误知道了,犯了初级错误,一边监听一边更改值,会直接陷入死循环。
    
  • 解决:使用 computed计算属性进行监听赋值,具体如下:

    1. data 中定义一个用于保存输入文本的变量(例如 textInput),并初始化为空字符串。
    2. el-input 组件上使用 v-model 指令将输入的文本绑定到 textInput 变量:
    <el-input v-model="textInput"></el-input>
    
    1. 创建一个计算属性(例如 trimmedText)来截取前60个字符并添加 “>>” 符号:
    computed: {
      trimmedText() {
        if (this.textInput.length > 60) {
          return this.textInput.substring(0, 60) + ">>";
        } else {
          return this.textInput;
        }
      }
    }
    
    1. 在模板中使用计算属性 trimmedText 来显示处理后的文本:
    <p>{{ trimmedText }}</p>
    

    这样,当在 el-input 中输入的文本长度超过60时,计算属性 trimmedText 会自动截取前60个字符并在末尾添加 “>>” 符号。如果输入的文本长度不超过60,将显示完整的文本。

watch避坑,使用computed进行处理数据,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-614059.html

到了这里,关于watch避坑,使用computed进行处理数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

    目录 前言 computed watch watch侦听ref数据 ref简单数据类型 ref复杂数据类型 watch侦听reactive数据 本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据 在vue3中,计算属性computed也是组合式api,也就是说要先引入,再在setup中使用 语法 完整:

    2024年01月18日
    浏览(62)
  • 学习Vue:computed VS watch

    在 Vue.js 中,Vue 实例与数据绑定不仅限于简单的插值表达式和指令。在实际开发中,您可能会遇到更复杂的数据处理需求。为此,Vue 提供了计算属性和侦听器这两个强大的工具,让您能够更灵活地处理和响应数据变化。 计算属性是 Vue 实例中的一个特殊属性,它允许您定义一

    2024年02月12日
    浏览(70)
  • Vue3的computed和watch

    目录 1、computed 2、computed完整写法  3、watch 4、watch监听对象具体属性 5、watch 监听reactive数据 1、computed 基于现有的数据计算出新的数据 2、computed完整写法   3、watch 1 . 侦听一个数据 第一个参数:监听的数据 第二个回调函数 2.侦听多个数据 第一个参数监听的数据构成的数组

    2024年01月24日
    浏览(41)
  • 浅谈Vue的属性,computed和watch

    是什么? 直接上demo,了解一下语法先~ conputed是 计算 属性,watch是 监听 属性,本质上都是同一个 watcher实例 ,它们都是 通过响应式系统与数据,页面建立通信 。 computed带有 \\\"懒计算\\\" 功能 监听的逻辑有差异 :computed是依赖的值变了,它去重新求值,watch是目标值变了,它去

    2024年01月18日
    浏览(45)
  • Vue 中的 computed 和 watch 的区别

    在Vue.js中, computed 和 watch 是两个常用的属性,用于处理数据的监听和响应。它们在功能上有一些相似之处,但也有一些重要的区别。本文将介绍 computed 和 watch 的区别,并提供相关的代码示例。 Vue 中的 computed 和 watch 都是用来观察数据变化的,但它们的用途和特点略有不同

    2024年02月07日
    浏览(48)
  • vue3 computed 和 watch 的差异

    🙂博主:锅盖哒 🙂文章核心: vue3 computed 和 watch 的差异 目录 前言 用法 computed watch 代码 理解 高质量的使用 Vue.js作为一种现代化的前端框架,提供了丰富的特性来帮助开发者构建高效和响应式的用户界面。在这其中, computed 和 watch 是两个非常重要的选项,它们都用于处理

    2024年02月08日
    浏览(49)
  • Vue3学习——computed、watch、watchEffect

    与Vue2.x中computed配置功能一致 写法 注意 监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)。 监视reactive定义的响应式数据中的某个属性时:deep配置有效。 情况一:监视ref定义的响应式数据 监视ref定义的对象,改变某一个属性时,

    2024年02月22日
    浏览(65)
  • 【Vue】watch、methods 和 computed 的区别?

    一、基本说明 1.computed: 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 2.methods: methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方 法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。 3.watch: 观察

    2024年02月09日
    浏览(54)
  • Vue 中的 watch 和 computed 的区别是什么?

    在 Vue.js 中, watch 和 computed 都是用来监听数据变化的方式,但它们的使用方式和实现机制有所不同,下面是它们的区别: ✨ 实现机制 watch 监听的是一个具体的数据,当数据变化之后会执行相应的回调函数; computed 属性就像一个响应式的计算属性,是基于所依赖的数据进行

    2024年02月05日
    浏览(39)
  • vue基本知识:methods,computed,watch,生命周期

    (Ⅰ)重点知识目标 2.1 Methods选项 使用场景 : 在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来增强逻辑代码复用性,在vue中,函数被定义在methods选项里来使用,定义完后就可以在vue 表达式中调用函数 2.2.1 基本用法 语法结构:

    2024年01月22日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包