可以用于文本格式化
用在: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
}
}
计算属性是一个 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: {
// 参数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
}
}
监听到对象中的属性发生变化时,就打印 “你变啦”