vue中filter过滤器,computed计算属性,以及watch侦听器用法及区别

1.filter,过滤器

// 在vue实例中
filter:{
    
    
过滤器名:function(value,其他参数){
    
    
	// 对value进行处理,然后return返回处理后的结果
	return ...
}
// 例
filter: {
    
    
	myFilter(value) {
    
    
	// 对value进行处理,然后return返回处理后的结果
		return ...
	}
// 在视图中
{
    
    {
    
    msg|myFilter}} 
// 把msg当做value参数进行处理,return返回处理的结果
//-----------------------------------------------------------------------------------------
// =========================================================================================
//=============================================================================================
// 带参数的过滤器
filter:{
    
    
	myFilter(value,n){
    
    
		return string(value).padstart(n,"*") // 这个例子是,对value进行处理,这个函数是处理value,在value开头加n个*号
		}
	}
// 视图中
{
    
    {
    
    msg|myFilter(100)}}
// --------------------------------------------------------------------------------------------
// ==========================================================================================
// ====================================================================================================
// 全局过滤器  项目中一般写在main.js中
vue.filter(过滤器名,function(value){
    
    
	return ...
}

2.计算属性

computed: {
    
    
	计算属性名(){
    
    
		对依赖的数据进行处理
		return  处理后的返回
	}
}
// 视图中
{
    
    {
    
    计算属性名}}
!!!!如果计算属性中依赖的数据项发生变化时,他会自动变化

过滤器是用来对数据格式进行转换的,计算属性是在原来数据的基础上加工计算出新数据,并且他具有缓存,可以提高渲染能力

3.vue侦听器(监听器) watch

watch: {
    
    
	属性名:function(){
    
      // 侦听的是data中的数据项,数据项一旦变化,调用函数
	}
}	

watch和计算属性computed有些相似,但是计算属性中必须有return返回值,而侦听器是函数处理,返回值是没有意义的,使用优先级:computed > watch,因为computed可以缓存

猜你喜欢

转载自blog.csdn.net/m0_49159526/article/details/107747445
今日推荐