vue filter

作者：花小泽ノ发布日期:2025-09-05 浏览:66

// Vue 2.x 中的 filter 示例

// 定义一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  filters: {
    // 定义一个简单的 filter，用于将文本转换为大写
    uppercase(value) {
      if (!value) return '';
      return value.toUpperCase();
    }
  }
});

<!-- HTML 模板 -->
<div id="app">
  <!-- 使用 filter 将 message 转换为大写 -->
  <p>{{ message | uppercase }}</p>
</div>

// 解释说明：
// 在 Vue 2.x 中，filters 是一种非常方便的方式，可以在模板中对数据进行格式化处理。
// 上面的例子中，我们定义了一个名为 `uppercase` 的 filter，它会将传入的值转换为大写。
// 然后在模板中使用 `{{ message | uppercase }}` 来应用这个 filter。

注意：Vue 3.x 已经移除了对 filters 的支持，推荐使用计算属性或方法来替代。

上一篇：vue store

下一篇：vue3+ts