文章目录
1. 计算属性与监视属性
1.1 计算属性 computed
Vue中的属性指的是data里的内容,利用已有的属性进行计算所得到的叫计算属性。
场景需求:输入姓,名,显示姓-名,并随输入的变化而变化
1、使用插值或方法实现:
<div id="root">
姓:<input type="text" v-model="firstName"><br /><br />
名:<input type="text" v-model="lastName"><br /><br />
<!-- 如果还需对属性进行其他操作,则js表达式会更长
而插值里的表达式应该写的简单易懂,不应太复杂 -->
全名插值:{{firstName.slice(0,3)}}-{{lastName}}<br /><br />
<!-- 这里是js表达式,fullName()是调用,得加小括号 -->
<!--若写两次,就要调用两次 -->
全名方法:{{fullName()}}<br /><br />
全名方法:{{fullName()}}<br /><br />
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
methods: {
fullName () {
return this.firstName + '-' + this.lastName
}
}
})
</script>
当data里的数据发生变化时,Vue模板的内容需要重新被解析,所以函数也会被重新调用。从而实现根据输入框内容实时更新全名。
- 用插值表达式的缺点是:如果数据处理再复杂一点,插值表达式会很复杂
- 用方法实现该效果的缺点是:多次用该数据,就要调用多次函数
2、计算属性的写法:
<div id="root">
姓:<input type="text" v-model="firstName"><br /><br />
名:<input type="text" v-model="lastName"><br /><br />
全名计算属性:{{fullNameCom}}<br /><br />
全名计算属性:{{fullNameCom}}<br /><br />
全名计算属性:{{fullNameCom}}<br /><br />
全名计算属性:{{fullNameCom}}<br /><br />
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
//计算属性
computed: {
fullNameCom: {
get () {
// 此处的this指向的是vm;改为箭头函数则不指向vm了
console.log('get读取属性');
return this.firstName + '-' + this.lastName
},
set (value) {
console.log('set', value);
this.firstName = value.split('-')[0]
this.lastName = value.split('-')[1]
}
}
},
})
</script>
几点说明:
(1) 计算属性
计算属性最终会出现在vm上(以属性的形式,不是对象的形式),直接读取使用即可。 如果计算属性要修改,必须写set函数去响应修改。
计算属性底层借助了Object.definepeoperty方法提供的getter和setter方法。
data里的数据放在了vm._data
里,但是计算属性并未放在vm._data
里,而是放在vm身上
(2) 计算属性的get方法
get方法是用来获取计算属性的,在两种情况下会执行:
- 初次读取fullNameCom时。
- 当所依赖的属性发生变化时
虽然代码中调用了4次计算属性,但是控制台只打印了一次get读取属性
,即只调用了一次get方法,这是因为会把初次读取的计算属性放入缓存中。与methods相比,内部有缓存机制(复用),效率更高。
3. 计算属性的set方法
当fullNameCom被修改时,set方法会被调用,进而修改data中的属性,进而重新计算fullNameCom的值。
一般都不会写set方法。
简写形式:
当不考虑修改,只考虑读取(get)时,可简写为
const vm = new Vue({
...
computed: {
fullNameCom () {
// function默认指的就是get方法
console.log('get读取属性');
return this.firstName + '-' + this.lastName
}
}
})
1.2 监视属性 watch
watch基本使用
- 当被监视的属性变化时, 回调函数(handler)自动调用, 进行相关操作
- 监视的属性(data中的属性或计算属性)必须存在,才能进行监视!!(如果不存在,也不会报错)
- 监视的两种写法:
- new Vue时传入watch配置
- 通过vm.$watch监视
<div id="root">
<h1>今天天气很{{info}}</h1>
<!-- 当绑定事件@click=xxx的操作很少时,也可以直接写在xxx里面 -->
<button @click="isHot =!isHot">切换天气</button>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
isHot: true
},
computed: {
info () {
return this.isHot ? '炎热' : '凉爽'
}
},
watch: {
isHot: {
immediate: true, // 默认是false,true意味着初始化的时候调用一下handler
handler (newvalue, oldValue) {
console.log('isHot:改为' + newvalue, oldValue);
}
}
}
})
//写法2:
vm.$watch('isHot', {
handler (newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
})
</script>
immediate
属性的应用看4.2的列表过滤
深度监视deep
现在data里有一个多级结构的属性
<div id="root">
<h1>a的值是{{numbers.a}}</h1>
<button @click="numbers.a++">a++</button>
</div>
<script>
const vm = new Vue({
...
data: {
numbers: {
a: 1,
b: 2,
obj: {
c: 3
}
}
}
})
</script>
监视numbers里a的变化:
const vm = new Vue({
...
watch: {
// 监视a,正常写属于应该有引号,之前别的属性没写是vue会给加上引号
'numbers.a': {
handler (newvalue, oldValue) {
console.log('a被修改为:' + newvalue);
}
}
}
})
监视number所有数据的变化
// 若不加deep属性,无论是a变还是c变,这个方法都不调用,因为numbers存的是地址值。除非加上deep:true
numbers: {
deep: true,
handler (newValue) {
console.log(newValue);
// 加入检测其中c的变化
console.log('numbers的被修改', newValue.obj.c);
}
}
总结:
- Vue中的watch默认不监测对象内部值的改变(一层);
- 配置deep:true可以监测对象内部值改变(多层)
- Vue自身可以监测对象内部值的改变,即控制台vm.numbers.a可以得到a的新值,但Vue提供的watch默认不可以!
watch简写
当不需要设置deep等属性,只写handler函数时,可简写为:
// watch第一种方式的简写
isHot (newvalue, oldValue) {
console.log('isHot:改为' + newvalue, oldValue);
console.log(this); //指向vm
},
// watch第二种方式的简写
vm.$watch('isHot', function (newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
console.log(this); // this指向vm
})
写成箭头函数则this不会指向vue
1.3 watch与computed的区别
- computed能完成的功能,watch都可以
- watch可以进行异步操作,但computed不行
比如,异步操作setTimout
里写匿名函数,由于computed
必须要一个return返回值,在setTimout
的匿名函数里,返回值无法交给计算属性。因此不行;而watch
里不需要return,通过this
可修改值,所以可以进行异步操作
还是姓名的案例,3S后显示新的全名
1. computed
const vm = new Vue({
el: "#root",
data: {
firstName: '张',
lastName: '三',
},
// 计算属性
computed: {
fullName () {
setTimeout(() => {
// return 返回给了setTimeout里的这个匿名函数,fullName拿不到返回值,所以无法进行异步操作
return this.firstName + '-' + this.lastName
})
}
}
})
2.watch
const vm = new Vue({
el: "#root",
data: {
firstName: '张',
lastName: '三',
fullName: '张-三'
},
// 监视
watch: {
firstName (newValue, oldValue) {
// firstName是Vue管理的函数,还是普通函数,所以this指向vm
console.log(this);
// 异步
setTimeout(() => {
// 箭头函数没有自己的this,则往外找,往外找就是firstName的this,即为vm
this.fullName = newValue + '-' + this.lastName
}, 3000)
},
lastName (newValue, oldValue) {...}
}
})
这里需要注意setTimeout里一定要写箭头函数,否则this不会指向vm。比如lastName里
lastName (newValue, oldValue) {
setTimeout(function () {
// function这个匿名函数是JS引擎调用的,有自己的this
console.log(this); // window
this.fullName = this.firstName + '-' + newValue
}, 3000)
}
总结
- 被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数, 这样this的指向才是vm 或 组件实例对象。
2 绑定样式
2.1 绑定class类
1、字符串写法:适用于样式的类名不确定,需要动态指定
class
指定类名
:class=xxx
等价于v-bind:class=xxx
:动态绑定类名,xxx
为js表达式`,且可以直接读取到data中的所有属性。
<div class="box" :class="bgC" @click="changeColor">小猪佩奇</div>
<script>
...
data: {
bgC: 'bgColor1',
},
methods: {
// 采用随机数,随机指定样式
changeColor () {
arr = ['bgColor1', 'bgColor2', 'bgColor3']
const index = Math.floor(Math.random() * arr.length)
this.bgC = arr[index]
}
}
</script>
解析后的效果为:
2、数组写法,适用于:要绑定的样式个数不确定、名字也不确定
<div class="box" :class="classArr">小猪佩奇</div>
<script>
data: {
// 数组里有哪个类就用哪个
classArr: ['fontStyle', 'bgColorStyle', 'borderStyle'],
}
</script>
3、对象写法,适用于已确定样式类的名称,个数,但不确定用哪一个
已确定样式类有borderStyle
和bgColorStyle
,但不确定用哪一个
<div class="box" :class="classObj">小猪佩奇</div>
<script>
data: {
// 为true应用这个类,为false则不用这个类
classObj: {
bgColorStyle: false,
borderStyle: true
}
}
</script>
可通过更改布尔值来确定用哪个样式
2.2 绑定style样式
包括对象写法和数组写法
<!-- 对象写法 -->
<div class="box" :style="styleObj">小猪佩奇</div>
<!-- 数组写法 -->
<div class="box" :style="[styleObj,styleObj2]">小猪佩奇</div>
<div class="box" :style="styleArr">小猪佩奇</div>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
styleObj: {
fontSize: '40px',
color: 'red'
},
styleObj2: {
backgroundColor: 'skyblue'
},
styleArr: [
{
fontSize: '20px',
},
{
color: 'red'
}
]
},
})
</script>
总结:
- class样式
写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。 - style样式
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。
3、条件渲染
v-show
- 写法:v-show=“表达式”
- 适用于:切换频率较高的场景。
- 特点:不展示的DOM元素未被移除。本质上就是设置元素的display属性值(none/block)
<h2 v-show="n===1">{{name}}</h2>
<script>
const vm = new Vue({
...
data: {
name: 'Tom and Jerry',
n: 0
}
})
</script>
v-if
- v-if=“表达式” || v-else-if=“表达式” || v-else=“表达式”
- 适用于:切换频率较低的场景。
- 特点:不展示的DOM元素直接被移除。
<!-- v-if判断之后,对应的else if则不会再判断条件是否满足.
此时data里的n为1-->
<h2 v-if="n===1">喜羊羊</h2>
<h2 v-if="n===1">懒羊羊</h2>
<h2 v-else-if="n===1">美羊羊</h2>
<h2 v-else>哈哈</h2>
满足v-if
的条件,就不会再判断v-else-if
,所以美羊羊不存在
拓展
v-if与template的联合使用:当条件满足时,解析的页面结构中并不会出现template。
<!-- 若想对一系列元素都进行v-if判断,可在外边包裹一个父元素;
若包裹div,则改变了代码的结构-->
<template v-if="n===1">
<h2>喜羊羊</h2>
<h2>美羊羊</h2>
<h2>懒羊羊</h2>
</template>
<div v-if="n===1">
<h2>小猪佩奇</h2>
<h2>乔治</h2>
</div>
4、列表
4.1 列表渲染
1. v-for基本使用
v-for可用来遍历数组、对象、字符串(用的少)
语法:v-for="(item, index) in xxx" :key="yyy"
key可以取遍历的索引index或者其他值,但key取值不能重复
<div id="root">
<h2>遍历数组</h2>
<!-- 1.v-for遍历数组,key也可取index值-->
<ul>
<li v-for="(item,index) in persons" :key="item.id">
{{item.id}}--{{item.name}}---{{item.age}}
</li>
</ul>
<h2>遍历对象</h2>
<!-- 2.遍历对象 (value,key) -->
<ul>
<li v-for="(value,key) in dog" :key="index">
{{key}}--{{value}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
persons: [
{ id: '001', name: 'tom', age: 18 },
{ id: '002', name: 'jerry', age: 19 },
{ id: '003', name: 'lucy', age: 20 },
],
dog: {
name: '小狗',
price: '10万',
color: '棕色'
}
}
})
</script>
2 key原理
1. key的作用:
key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。
2. 虚拟DOM对比算法的规则
- 首先根据key值,新虚拟DOM寻找key相同的旧虚拟DOM
- 找到了
- 若新旧虚拟DOM中内容没变, 直接使用之前的真实DOM
- 若新虚拟DOM中内容变了, 变化的部分则生成新的真实DOM,没变的部分继续沿用之前的真实DOM。
- 没找到
- 创建新的真实DOM,随后渲染到到页面。
- 找到了
3. 当用index作为key时
比如,现有一个数组及新成员老刘的信息:
persons: [
{ id: '001', name: '张三', age: 18 },
{ id: '002', name: '李四', age: 19 },
{ id: '003', name: '王五', age: 20 },
]
const member = { id: '004', name: '老刘', age: 19 }
遍历渲染到列表上,点击按钮时,会将老刘添加在数组首位:
<button @click.once="add">添加新成员</button>
<ul>
<li v-for="(item,index) in persons" :key="index">
{{item.id}}--{{item.name}}--{{item.age}}
<input type="text">
</li>
</ul>
在添加之前,将页面上的信息粘贴到输入框内
点击添加后:
这种情况涉及到底层的虚拟DOM对比算法,结合前边的算法对比规则
可以看出,在这个例子中,输入框里复制的内容是存在真实DOM里的,而不是虚拟DOM。所以在虚拟DOM对比时,两边的li里边都是一样的input标签,所以input直接沿用之前的真实DOM。
若在数组后边追加新数据,而不是添加在数组前边,则不会有这样的问题
4. 当用数据的唯一标识(id)作为key时
总结:
- 如果不写key值,则默认将index作为key值
- 用index作为key可能会引发的问题:
- 若对数据进行:逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
- 如果结构中还包含输入类的DOM:会产生错误DOM更新 ==> 界面有问题。
- 开发中如何选择key
- 最好使用每条数据的唯一标识作为key
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。
4.2 列表过滤
需求:已有人员列表,通过输入姓名,对人员列表进行过滤,实现模糊筛选
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(item,index) in filterPersons">
{{item.name}}-{{item.age}}-{{item.sex}}
</li>
</ul>
<script>
data: {
persons: [
{ id: '001', name: '马冬梅', age: 19, sex: '女' },
{ id: '002', name: '周冬雨', age: 20, sex: '女' },
{ id: '003', name: '周杰伦', age: 21, sex: '男' },
{ id: '004', name: '温兆伦', age: 22, sex: '男' }
],
keyWord: '',
},
</script>
方法一:采用计算属性的方法:
computed: {
filterPersons () {
return this.persons.filter((item) => {
// indexOf('') --返回0
// indexOf()---有该字符,返回索引位置;没有则返回-1
return item.name.indexOf(this.keyWord) !== -1
})
}
}
方法二:采用监听属性的方法:
// data里要提前加上属性 filterPersons:[]
watch: {
keyWord: {
immediate: true, // 先调用一次,展示所有列表
handler () {
console.log('keyWord改变');
this.filterPersons = this.persons.filter((item) => {
return item.name.indexOf(this.keyWord) != -1;
})
}
}
}
此处如果不写immediate: true
,则一开始filterPersons
是空,列表就什么也不展示;
先调用一次handler()
,keyWord
为空,indexOf('')
的值是0,可以将persons
里的内容都赋给filterPersons
总结:优先选择watch
写法
4.3 列表排序
在上边过滤的基础上,对过滤出来的数据进行排序
<button @click="sortType = 1">年龄升序</button>
<button @click="sortType = 2">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<script>
computed: {
filterPersons () {
const arr = this.persons.filter((item) => {
return item.name.indexOf(this.keyWord) !== -1
})
// 判断是否需要排序 0就是原顺序,不需要排序
if (this.sortType) {
console.log(this.sortType);
arr.sort((p1, p2) => {
// 1是升序
return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age
})
}
return arr
}
}
</script>
4.4 Vue监测对象及数组变化的原理
1. 引出问题
如图所示,点击更新按钮,马冬梅的信息应该得到修改,此时按钮点击事件的回调函数是
updateMei () {
this.persons[0].name = "马老师"
this.persons[0].age = 50
this.persons[0].sex = "男"
}
但是如果改成
updateMei () {
this.persons[0] = { id: '001', name: '马老师', age: 50, sex: "男" }
}
则页面不会更新,但是数据确实是变了
看完下边的Vue监测数组数据原理的内容后,可知回调函数可以修改为:
updateMei () {
this.persons.splice(0,1,{ id: '001', name: '马老师', age: 50, sex: "男" })
}
2. Vue监测对象变化原理及模拟数据监测
const vm = new Vue({
el: "#root",
data: {
name: 'tom',
age: 20
},
})
- 在之前的数据代理中可知,
data
中的数据放在了vm._data身上
,当读取vm身上的name属性时,是调用了getter方法,读取了vm._data
中的数据; - 实际上,data首先被加工,以实现响应式(响应式就是数据变,页面就跟着更新)。然后被放在了
vm._data
上。当修改name属性时,调用setter方法,而setter方法里实现了重新解析模板。 - 总结:name被修改,setter方法就会被调用,模板重新被解析,就会生成虚拟DOM,然后新旧虚拟DOM对比,更新页面。
模拟对象数据监测:(没太懂)
// 对象监测
let data = {
name: 'tom',
age: 10
}
// 创建一个监视的实例对象,用于监视data中属性的变化
const obs = new Observer(data)
console.log(obs);
// 准备一个vm实例对象
let vm = {}
vm._data = data = obs
function Observer (obj) {
// 汇总对象中的所有属性形成一个数组
const keys = Object.keys(obj)
// 遍历
keys.forEach((k) => {
// this指的是实例 obs,往obs身上加属性
Object.defineProperties(this, k, {
get () {
return obj[k]
},
set (value) {
console.log(`${k}被改了,重新解析模板,生成虚拟DOM`)
obj[k] = val
}
})
})
}
3. Vue.set方法
需求:现在有这样一组数据的信息展示在页面上,要求点击按钮给students对象添加响应式属性gender,默认值是男
页面结构:
<h1>姓名:{{students.name}}</h1>
<button @click="aggGender">点击添加属性</button>
<h1 v-if="students.gender">性别:{{students.gender}}</h1>
<h1>年龄:真实{{students.age.rAge}},对外{{students.age.sAge}}</h1>
<h1>朋友们</h1>
<ul>
<li v-for="f in students.friends">
{{f.name}}---{{f.age}}
</li>
</ul>
问:data里的students没有gender属性,为什么不报错
答:对象里没有这个属性,则这个属性的值是undefined。对于undefined,Vue不会报错;但是如果是缺少gender这个属性,则会报错不存在。
<!-- 这样会报错,因为data里没有定义这个属性 -->
<h1>性别:{{gender}}</h1>
如果通过vm._data.students.gender='男'
这种方式添加属性。这样添加上的gender不是响应式的属性,即没有getter和setter
解决:
- 语法:
Vue.set(target,key,value)
- 作用:向响应式对象中添加一个property,并确保这个新的property同样是响应式的,且触发试图更新。
- 注意:set方法里的target不能是vue实例(vm),或者Vue实例的根数据对象(vm.data)
aggGender () {
// 只能给data里的某一个对象追加属性,并不能给data追加属性
Vue.set(vm._data.students, 'gender', '男')
vm.$set(vm._data.students, 'gender', '男')
// 根据数据代理可知 vm._data.students === vm.students,所以还可以写为:
Vue.set(vm.students, 'gender', '男')
vm.$set(vm.students, 'gender', '男')
// 因为方法里的this指向的是vm,所以还可以写为
Vue.set(this.students, 'gender', '男')
}
5、收集表单数据
1. 文本输入框
<input type="text"/>
,v-model收集的是value值,用户输入的就是value值。
2. 单选框radio
<input type="radio"/>
,v-model收集的是value值,且要给标签配置value值。
<div id="root">
<!-- label: 点击标签表单元素获取焦点 label属性for 通过与表单元素的id 对表单进行关联 -->
<label for="uname">姓名:</label>
<input type="text" v-model="uname" id="uname"><br><br>
性别:
男<input type="radio" v-model="gender" value="man" />
女<input type="radio" v-model="gender" value="woman"><br><br>
</div>
<script>
//vue实例里的data
data:{
uname:'',
gender:''
}
</script>
3. 复选框checkbox
<input type="checkbox"/>
1.没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
2.配置input的value属性:
(1) v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
(2) v-model的初始值是数组,那么收集的的就是value组成的数组
<h2>没有配置value</h2>
旅游:
泰山<input type="checkbox" v-model="place">
马尔代夫<input type="checkbox" v-model="place">
海南<input type="checkbox" v-model="place"><br><br>
<!-- data:{hobby: ''} -->
<h2>配置value,data接收的数据是字符串</h2>
爱好:
睡觉<input type="checkbox" v-model="hobby" value="sleep">
吃饭<input type="checkbox" v-model="hobby" value="eat">
游戏<input type="checkbox" v-model="hobby" value="game"><br><br>
<!-- 标准配置 -->
<!-- data:{fruit:[]} -->
<h2>配置value,data接收的数据是数组</h2>
水果:
苹果<input type="checkbox" v-model="fruit" value="apple">
香蕉<input type="checkbox" v-model="fruit" value="banana">
橙子<input type="checkbox" v-model="fruit" value="orange"><br><br>
hobby和place都是只要选一个选项,data就存为true。其他选项也都会被自动勾选
修饰符
- lazy:失去焦点再收集数据
- number:输入字符串转为有效的数字
- trim:输入首尾空格过滤
<!-- type设为number,则文本框内只能输入数字。number修饰符使得收集到的数据是number类型,而不是字符串 -->
<label for="uname">姓名:</label>
<input type="text" v-model.trim="uname" id="uname"><br><br>
年龄: <input type="number" v-model.number="age"><br><br>
<textarea v-model.lazy="info"></textarea>
6、过滤器
对要显示的数据进行特定处理后再显示(适用于一些简单逻辑的处理),并没有改变原本的数据, 是产生新的对应的数据。
比如:对时间戳进行处理,显示当前时间。此处用到dayjs库安装 | Day.js中文网
1.使用过滤器
方式一:插值 {{ 要处理的数据xxx | 过滤器名}}
方式二(使用较少):或 v-bind:属性=“xxx | 过滤器名”
2.过滤器参数
默认传递的是要处理的数据xxx,当传多个参数时,过滤器接收到的第一个参数默认为待处理的数据xxx
<!-- 引入dayjs库 -->
<script src="./js/dayjs.min.js"></script>
<div id="root">
<h2>显示格式化之后的时间</h2>
<!-- 插值 无参-->
<h3>现在是:{{time | timeFormater}}</h3>
<!-- 插值,有参数 接收到的第一位是value值,即time-->
<h3>现在是:{{time | timeFormater2('/')}}</h3>
</div>
<script>
const vm = new Vue({
。。
data: {
// Date.now() 获取时间戳
time: 1721268391234,
},
filters: {
timeFormater (value) {
return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
},
timeFormater2 (value, str) {
return dayjs(value).format(`YYYY${str}MM${str}DD HH:mm:ss`)
}
}
})
</script>
3.过滤器串联
语法:{{ 要处理的数据xxx | 过滤器1 | 过滤器2}}
<div id="root">
<h3>现在是:{{time|timeFormater2('-')|mySlice}}</h3>
<!-- v-bind使用,data里定义属性msg: '云彩很好看' -->
<input type="text" :name="msg | mySlice">
</div>
<script>
const vm = new Vue({
...
filters: {
timeFormater2 (value, str) {
return dayjs(value).format(`YYYY${str}MM${str}DD HH:mm:ss`)
},
// 截取前4位
mySlice (value) {
return value.slice(0, 4)
}
}
})
</script>
4.局部过滤器与全局过滤器
局部过滤器只限本vue实例使用,定义全局过滤器:
// 全局过滤器
Vue.filter('mySlice', function (value) {
return value.slice(0, 4)
})
const vm = new Vue({
...
// 局部过滤器
filters: {
...
}
})