Vue.filter 过滤器

【过滤器】

import Vue from ‘../../../node_modules/vue/dist/vue‘;

// 后台数据与前端展示数据需要换算,与后台交互的请求的参数是不需要。假如说前端展示价格是按照元来算,而后台提供的数据是按分来算,在提交给后台,还是按照分来算。

// 全局过滤器
Vue.filter(‘YuanToFen‘, function (value) {
  if (!Number(value)) return 0;
  value = Number(value);
  return Number(value) / 100;
});

const app = new Vue({
  // el: ‘#app‘,
  template: ‘<div @click="testhandler" ref="test">{{ price | YuanToFen }} content</div>‘,
  data: {
    price: 100, // 以分为单位
  },
  // 本地创建过滤器
  filter: {
    YuanToFen (value) {
      if (!Number(value)) return 0;
      value = Number(value);
      return Number(value) / 100;
    },
  },
});

Vue.config.devtools = false;
// Vue.config.silent = true; // 取消vue的报错信息
app.$mount(‘#app‘);

原文地址:https://www.cnblogs.com/liangcheng11/p/9172082.html

时间: 2024-10-11 10:25:52

Vue.filter 过滤器的相关文章

Vue的过滤器,生命周期的钩子函数和使用Vue-router

一.过滤器 1.局部过滤器 在当前组件内部使用过滤器 给某些数据 添油加醋 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } //使用 管道符 数据 | 过滤器的名字('alex','wusir') <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

vue.js 过滤器

vue的过滤器可以用来对数据进行格式化 1.过滤器注册 过滤器注册分为全局注册和局部注册 (1)全局注册:所有的组件中都能使用 语法:Vue.filter(过滤器名称,回调函数) 回调函数的参数就是需要过滤处理的数据 //入口文件 main.js import Vue from 'vue' import App from './App' import router from './router' Vue.filter('toUpperCase',function(val){ return val

Vue2.0 注册过滤器Vue.filter

Vue.filter( id, [definition] ) 参数: {string} id {Function} [definition] 用法: 注册或获取全局过滤器 1 // 注册 2 Vue.filter('my-filter', function (value) { 3 // 返回处理后的值 4 }) 5 // getter,返回已注册的过滤器 6 var myFilter = Vue.filter('my-filter') 根据上一遍笔记,可以在新的Vue2.0里面注册过滤器

vue的过滤器filter

前记: 排版记录,点耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍: 某个filter.js // 限制汉字的个数 export const limitWordLength = Vue.filter('limitWordLength', (str, length, sufix) => { /* es

vue基础----过滤器filter

1.用的场景:一个功能在每个组件都能用,而computed虽然有缓存,但不能用在每一个组件,需要的话的每一个都需要写. 2.特点:改变数据的展示形式,不改变原有的形式 分为全局与局部的 <div id="app"> <!--{{msg | upper}} --> {{msg | upper("l")}} </div> <script src="./node_modules/vue/dist/vue.js"

vue el-table和添加全局的filter过滤器,并支持过滤器文字换图标

vue 的filter 过滤器不仅仅是限于文字和单位的转换可以加图标.这里基于封装全局的el-table. el-table请自行去官网查看 然后table组件中,如果有filter过滤器指向全局的filter.js中 然后在main.js中引入filter.js文件 然后就可以在其他地方调用. 写的比较粗糙,不喜勿喷.谢谢 原文地址:https://www.cnblogs.com/Gherardo/p/12005181.html

vue(2) -- 过滤器

1.vue 提供的过滤器 debounce  配合事件,延迟执行 <div id="box"> <input type="text" @keyup="show | debounce 200"> </div> <script> new Vue({ el:"#box", data:{ }, methods:{ show:function (){ alert(1); } } }) &l

Vue自定义过滤器

gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也

vue之过滤器

在vue2.0以前的版本中vue内置的过滤器,但是因为缺乏纯JavaScript的灵活性,现在vue2.0版本中已经删除了内置过滤器,所以需要自己注册过滤器,我们可以定义本地(在某一个template里面定义filter)过滤器,或者定义全局(global)过滤器.需要提醒的是,如果你定义了一个全局过滤器,它必须在Vue实列之前定义,以上两种方式,我们将传递value作为参数. 全局过滤器 下面定义一个全局过滤器,用于在数据前加上大写的VUE.需要注意的是,过滤器定义必须始终位于Vue实例之上,