Vue.js备忘记录(四) vue过滤器文本格式化, 插槽 slot-CSDN博客

本文链接：https://blog.csdn.net/finedayforu/article/details/109571434

本文详细介绍了Vue.js中的过滤器，包括如何创建和使用文本格式化过滤器，以及过滤器在模板中的应用。接着探讨了数组的响应式方法，指出哪些操作会触发视图更新。最后，重点讨论了插槽的使用，包括基本插槽、具名插槽、作用域插槽的用法，并强调了避免在插槽上直接设置class的注意事项。

摘要由CSDN通过智能技术生成

一. vue过滤器 //文本格式化

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

过滤器可以用在两个地方：双花括号插值和v-bind表达式

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{
   { message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<!-- 过滤器可以串联 -->
{
   { message | filterA | filterB }}

你可以在一个组件的选项中定义本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

注意:过滤器的第一个参数已经被规定死了,永远都是过滤器管道符号前面的那个数据

二. 数组中的那些方法是响应式的?

我们知道,我们可以用v-for遍历数组, 那么数组中那些方法是改变自身的?只有改变自身的方法才不用重新赋值吧

1.以下方法是响应式的

let arr =['a','b','c','d']
//1 push数组最后面添加元素
arr.push('e')

//2.pop删除最后一个元素
arr.pop()

//3.shift删除第一个元素
arr.shift()

//4.unshift 数组最前面添加元素
arr.unshift('e') 

//5.splice 删除/插入/替换元素
arr.splice(2,1) //从2开始删除1个
arr.splice(2,0,'f'