Vue2过滤器、侦听器、计算属性总结

一、过滤器

过滤器(Filter)是vue为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式v-bind属性绑定
过滤器应该被添加在javaScript表达式的尾部,由“管道符”进行调用。

//局部过滤器
{{message | capi}}

//script
data:{
	message:'hello vue.js'
}
filters:{
	capi(val){
		const first = val.charAt(0).toUpperCase()
		const other = val.slice(1)
		return first + other
	  }
}


//全局过滤器
{{message | capi}}
//script
Vue.filter('capi',function(str){
	const first = str.charAt(0).toUpperCase()
	const other = str.slice(1)
	return first + other
})

二、侦听器

watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作

//script
data:{
	username:''
}

//方法格式
//缺点1:不会自动触发
//缺点2:如果侦听器的是一个对象,如果对象中的属性发生了变化,不会触发侦听器
watch:{
	username(newVal){
		if (newVal==='') return
		$.get('https://www.escook.cn/api/finduser/'+ newVal,function(result){
			console.log(result)
		})
	}
}
//对象格式
//优点1:可以通过immediate自动触发
//优点2:可以通过deep选项,让侦听器深度监听对象中每个属性的变化
watch:{
	username:{
		handler(newVal,oldVal){
			console.log(newVal,oldVal)
		},
		immediate:true
	}
}

方法格式
缺点1:不会自动触发
缺点2:如果侦听器的是一个对象,如果对象中的属性发生了变化,不会触发侦听器

对象格式
优点1:可以通过immediate自动触发
优点2:可以通过deep选项,让侦听器深度监听对象中每个属性的变化

三、计算属性

计算属性指的是通过一系列运算之后,最终得到的一个属性值
这个动态计算出来的属性值可以被模板结构或methods方法使用。
特点:
1.定义的时候要被定义成"方法"
2.在使用计算属性的时候,当普通的属性使用即可
好处:
1.实现了代码的复用
2.只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值。

<div>
<input type="text" v-model.number="a"><input>
<input type="text" v-model.number="b"><input>
<input type="text" v-model.number="c"><input>
<div class="box" :style="{backgroundColor:rgb}">
</div>

//script
data:{
r:0,
g:0,
b:0
}

computed:{
rgb(){
		return `rgb(${this.r},${this.g},${this.b})`
	}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值