vue.filter&computed_vue computed-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39205240/article/details/80805053

本文介绍如何在Vue中创建并使用自定义过滤器。通过示例代码展示了过滤器的基本用法，包括如何进行数值处理及货币单位转换等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  title 
  >vue自定义过滤器 
  </ 
  title 
  > 
 
 
  < 
  script 
  src= 
  "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scala 
 
 
      ble=no" 
   /> 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 
 
  < 
  div 
  class= 
  "test" 
  > 
 
 
  < 
  p 
  >{{message | sum}} 
  </ 
  p 
  > 
 
 
  < 
  p 
  >{{message | cal(10 , 20)}} 
  </ 
  p 
  > 
 
 
  <!-- 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。--> 
 
 
  < 
  p 
  >{{message | sum | currency }} 
  </ 
  p 
  > 
 
 
  <!--添加两个过滤器,注意不要冲突--> 
 

 
  < 
  input 
  type= 
  "text" 
  v-model= 
  "ToNumber" 
  > 
 
 
  <!--用户从input输入的数据在回传到model之前也可以先处理--> 
 

 
  </ 
  div 
  > 
 
 
  < 
  script 
  type= 
  "text/javascript" 
  > 
 
 
  // -----------------------------------------华丽分割线(从model->view)--------------------------------------- 
 
 
  Vue. 
  filter( 
  "sum", 
  function ( 
  value) { 
  //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 
 
 
  return 
  value + 
  4; 
 

   }); 
 

 
  Vue. 
  filter( 
  'cal', 
  function ( 
  value, 
  begin, 
  xing) { 
  //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 
 
 
  return 
  value + 
  begin + 
  xing; 
 

   }); 
 
 
  Vue. 
  filter( 
  'currency', 
  function( 
  value){ 
 
 
  return 
  value + 
  '$'; 
 

   }) 
 

 
  new 
  Vue({ 
 
 
  el: 
  ".test", 
 
 
  data: { 
 
 
  message: 
  12 
 

   }, 
 
 
  computed:{ 
 
 
  ToNumber:{ 
 
 
  set 
  : 
  function( 
  value){ 
 
 
  this. 
  message = 
  new 
  Number( 
  value); 
 

   }, 
 
 
  get 
  : 
  function(){ 
 
 
  return 
  this. 
  message; 
 

   } 
 

   } 
 

   } 
 
 
  //计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 
 
 
  //注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。 
 

   }); 
 
 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 