vue filter函数的用法

作者：淡情发布日期:2025-06-28 浏览:62

// Vue 2.x 中使用 filter 的示例代码

// 引入 Vue
import Vue from 'vue';

// 定义一个全局过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
});

<!-- HTML -->
<div id="app">
  <!-- 使用过滤器 -->
  {{ message | capitalize }}
</div>

// 解释说明：
// 上述代码定义了一个名为 'capitalize' 的全局过滤器，它会将传入的字符串首字母大写。
// 在模板中通过 {{ message | capitalize }} 使用该过滤器，输出结果为 "Hello world"。

// 注意：Vue 3.x 已经移除了对过滤器的支持，建议在 Vue 3.x 中使用计算属性或方法来替代过滤器。

如果需要 Vue 3.x 的替代方案，请告知。

上一篇：vue深拷贝

下一篇：vue监听localstorage变化