vue滤镜分别是什么

Vue滤镜是一种能够对元素进行图形处理的特效。通过Vue提供的filter属性，我们可以为元素添加不同的滤镜效果。以下是Vue中常用的滤镜效果：

1. blur(模糊效果)：给元素添加模糊的外观。
2. brightness(亮度)：调整元素的亮度，值为百分比或者具体的亮度值。
3. contrast(对比度)：调整元素的对比度，值为百分比或者具体的对比度值。
4. grayscale(灰度)：将元素转变为灰度图像。
5. hue-rotate(色相旋转)：调整元素的色相。
6. invert(反转)：将元素的颜色进行反转。
7. opacity(不透明度)：调整元素的透明度，值为0到1之间的小数。
8. saturate(饱和度)：调整元素的饱和度，值为百分比或者具体的饱和度值。
9. sepia(褐色)：将元素转变为褐色图像。
10. drop-shadow(阴影)：给元素添加阴影效果，可调整阴影的颜色、位置和模糊程度。

以上是Vue中常用的滤镜效果，通过为元素添加相应的filter属性，可以实现不同的图形处理效果。务必注意，滤镜效果只适用于支持CSS3的浏览器。

Vue.js 中可以使用的滤镜有以下几种：

1. 数字格式化滤镜（number-filter）：用于格式化数字的显示方式，可以设置小数位数、千分位分隔符等参数。
2. 日期格式化滤镜（date-filter）：用于格式化日期的显示方式，可以设置日期格式、语言等参数。
3. 文本截断滤镜（truncate-filter）：用于将长文本截断为指定长度的字符串，可以在截断处添加省略号。
4. 大写转换滤镜（uppercase-filter）：用于将字符串转换为大写形式。
5. 小写转换滤镜（lowercase-filter）：用于将字符串转换为小写形式。

这些滤镜可以通过在模板中使用管道符 | 来调用，语法类似于下面的示例：

<p>{{ number | numberFilter }}</p>
<p>{{ date | dateFilter('YYYY-MM-DD') }}</p>
<p>{{ text | truncateFilter(20) }}</p>
<p>{{ string | uppercaseFilter }}</p>
<p>{{ string | lowercaseFilter }}</p>

其中 number、date、text、string 等是需要被过滤的数据，而 numberFilter、dateFilter、truncateFilter、uppercaseFilter、lowercaseFilter 则是对应的过滤器函数名。

同时，Vue.js 还支持自定义滤镜。可以通过 Vue.filter() 方法来注册自己的滤镜函数。例如：

Vue.filter('myFilter', function(value) {
  // 滤镜逻辑
  return value;
});

这样就可以在模板中使用 myFilter 这个自定义滤镜了。例如：

<p>{{ number | myFilter }}</p>

在Vue中，可以通过使用CSS滤镜来添加特效和修改元素的外观。Vue提供了一些常用的滤镜属性，可以用于改变元素的颜色、模糊度、亮度等。下面将介绍Vue中常用的滤镜属性。

1. blur：模糊滤镜，用于给元素添加模糊效果。可以通过以下方式使用：

<div class="blur"></div>

.blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

2. brightness：亮度滤镜，用于调整元素的亮度。取值范围为0-1，表示降低亮度；大于1则提高亮度。可以通过以下方式使用：

<div class="brightness"></div>

.brightness {
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
}

3. contrast：对比度滤镜，用于调整元素的对比度。取值范围为0-1，表示降低对比度；大于1则提高对比度。可以通过以下方式使用：

<div class="contrast"></div>

.contrast {
  -webkit-filter: contrast(0.5);
  filter: contrast(0.5);
}

4. grayscale：灰度滤镜，用于将元素转换为灰度图像。取值范围为0-1，表示灰度程度。可以通过以下方式使用：

<div class="grayscale"></div>

.grayscale {
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);
}

5. hue-rotate：色调滤镜，用于改变元素的色调。取值为角度值，表示旋转角度。可以通过以下方式使用：

<div class="hue-rotate"></div>

.hue-rotate {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

6. saturate：饱和度滤镜，用于调整元素的饱和度。取值范围为0-1，表示饱和度程度。可以通过以下方式使用：

<div class="saturate"></div>

.saturate {
  -webkit-filter: saturate(0.5);
  filter: saturate(0.5);
}

7. sepia：褐色滤镜，用于将元素转换为褐色图像。取值范围为0-1，表示褐色程度。可以通过以下方式使用：

<div class="sepia"></div>

.sepia {
  -webkit-filter: sepia(0.5);
  filter: sepia(0.5);
}

这些是Vue中常用的滤镜属性，你可以根据需要自由组合和调整滤镜效果，以实现各种炫酷的特效。同时，你还可以使用v-bind指令将滤镜属性的值绑定到Vue组件的数据属性上，以实现动态的滤镜效果。