【Vue2】关于过滤器以及计算和监听属性的理解

且陶陶

发布于 2023-04-12 16:00:02

4270

发布于 2023-04-12 16:00:02

文章被收录于专栏：Triciaの小世界

过滤器 filters

可以用于文本格式化

用在：1. 插值表达式 2. v-bind属性绑定

使用方法

由“管道符”|进行调用

<!-- 通过过滤器对message进行过滤 -->
<p>{{message | 过滤器}}</p>

<!-- 通过过滤器对title进行过滤 -->
<div :title="title | 过滤器"></div>

定义过滤器

局部过滤器

在 filters 节点中定义过滤器，该过滤器只能在当前组件中调用。

// 提供过滤器
  filters: {
    // 首字母大写过滤器
    upcase(input) {
      // input 是需要过滤的内容
      const str = input
        .split(' ')
        .map((item) => {
          return item[0].toUpperCase() + item.slice(1)
        })
        .join(' ')
      return str
    }
  }

全局过滤器

在main.js中通过Vue.filter() 方法定义全局过滤器

// 全局过滤器  处理时间
Vue.filter('time', (input) => {
    return moment(input).format('YYYY-MM-DD HH:mm:ss')
})

调用多个过滤器

<template>
  <div id="app">
    <div>{{ msg | firstup | len}}</div>
  </div>
</template>

过滤器传参

<template>
  <div id="app">
    <div>{{ len(3) }}</div>
  </div>
</template>

过滤器：

filters: {
    len(input, length = 10) {
      // 10是默认值，忘记传实参时就用10
      return input.length > length ? input.slice(0, length) + '...' : input
    }
  }

计算属性 computed

计算属性是一个 function，这个 function 的返回值就是计算属性最终的值。

基本使用

定义

// 组件的数据： 需要计算的属性
computed: {
  reverseMsg () {
    return this.msg.split('').reverse().join('')
  }
}

使用

<p>{{ reverseMsg }}</p>

注意：计算属性默认不允许修改，因为计算属性是根据别的值计算的

完整写法

get()定义计算属性
set()修改计算属性

computed: {
    // 计算属性完整写法：一个对象
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(value) {
        const arr = value.split('')
        this.firstName = arr[0]
        this.lastName = arr[1]
      }
    }
  }

计算属性的缓存

计算属性只要计算了一次，就会把结果缓存起来，以后多次使用计算属性，直接使用缓存的结果，只会计算一次。

计算属性依赖的属性一旦发生了改变，计算属性会重新计算一次，并且缓存

属性监听 watch

基本使用

监听基本数据类型

例如：

监听金钱变化案例：

定义

watch: {
    // 参数1： value    变化后的值
    // 参数2： oldValue 变化前的值
    money(value, oldValue) {
      console.log('钱多啦！！！！', value, oldValue)
    }
  }

使用

注册一个点击事件

<template>
  <div id="app">
    <h1>监听属性</h1>
    <div>金钱：{{ money }}</div>
    <div>消息：{{ msg }}</div>
    <button @click="money++">挣钱</button>
  </div>
</template>

监听到money数据变化时，就就会打印 “钱多啦！！！！”

深度监听

监听复杂数据类型

// 监听的完整写法
watch: {
    user: {
      handler(value) {
        console.log('你变啦', value)
      },
      // 深度监听
      deep: true,
      // 立即监听*(页面一打开就监听)*  默认为false
      immediate: false
    }
  }

监听到对象中的属性发生变化时，就打印 “你变啦”

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-03-15，如有侵权请联系 cloudcommunity@tencent.com 删除

缓存