How to use the vue.filter function in vue

// 累计盈亏百分比-历史
Vue.filter('profitHistoryPercent', function (profit, capitalAmount) {
  // 现金=0
  if (!capitalAmount) {
    if (profit <= 0) {
      return 0;
    } else {
      return 100;
    }
  } else {
    return profit / capitalAmount * 100;
  }
})

// 正负加减号
Vue.filter('operator', function (value) {
  if (!value || isNaN(value)) {
    return 0.00;
  } else if (value > 0) {
    return '+' + value;
  } else {
    return value;
  }
})

// 交易日单位
Vue.filter('tradeCycle', function (value) {
  if (!value) {
    return '交易日';
  } else if (value == '1') {
    return '月';
  } else {

},
	'/books': {
		component: Books
	},
	'/book/:id': {
		component: Book
	}
})

// fallback route
router.redirect({
	'*': '/'
})

// register a filter
Vue.filter('authorIdToName', function (id, authors) {

	let author = (authors.length > 0) ? authors.find(a => id === a.id) : ''

	if(author.hasOwnProperty('name'))
		return author.name
	else 
		return ''
})

// expose the whole thing on element with 'app' as an id
router.start(MainTemplate, '#app')

const messages = {
  'en': locales.en,
  'en-US': locales.en,
  'fr': locales.fr,
  'fr-FR': locales.fr
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: navigator.language,
  messages
})

Vue.config.productionTip = false

Vue.filter('formatDate', function (value) {
  if (value) {
    const date = new Date(String(value))
    return isNaN(date) ? value : date.toLocaleDateString() + ' at ' + date.toLocaleTimeString()
  }
})

// credit https://stackoverflow.com/a/847196
Vue.filter('formatTime', function (millisecondsTimestamp) {
  // Create a new JavaScript Date object based on the timestamp
  // multiplied by 1000 so that the argument is in milliseconds, not seconds.
  if (millisecondsTimestamp < 0) millisecondsTimestamp = 0
  const date = new Date(millisecondsTimestamp)
  // Hours part from the timestamp
  const hours = date.getUTCHours()
  // Minutes part from the timestamp
  const minutes = '0' + date.getUTCMinutes()

import 'vant/lib/index.css';
import FastClick from 'fastclick';
FastClick.attach(document.body); // 解决移动端点击 300 毫秒延时问题
import '@/assets/css/reset.css';
import '@/assets/css/border.css';
import '@/assets/css/index.css';
import '@/assets/css/icon.styl';
// 执行移动端适配
require('./utils/adapter')(document, window);

Vue.use(Lazyload);  
Vue.use(Vant);

Vue.config.productionTip = false;
// 定义全局过滤器
Vue.filter('toFixed', function(value) {
  return Number(value).toFixed(2);
});

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

import Vue from 'vue';
import VTooltip from 'v-tooltip';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

import annotationMixin from './mixin';
import HTTP from './http';
import simpleShortcut from './filter';

Vue.use(VTooltip);
Vue.use(Loading);
Vue.use(require('vue-shortkey'), {
  prevent: ['input', 'textarea'],
});

Vue.filter('simpleShortcut', simpleShortcut);

Vue.component('annotator', {
  template: '<div>\
                    <span class="text-sequence">{{ text.slice(r.start_offset, r.end_offset) }}<button class="delete is-small"></button></span>\
               </div>',
  props: {
    labels: Array, // [{id: Integer, color: String, text: String}]
    text: String,
    entityPositions: Array, // [{'startOffset': 10, 'endOffset': 15, 'label_id': 1}]

Vue.use(VueRx, {
  Observable,
  Subscription
})

// Depject API
import DepjectAPI from './plugins/depject_api'
Vue.use(DepjectAPI)

// Observable adapters for pull-streams etc
import SourceObserver from './plugins/source_observer'
Vue.use(SourceObserver)

import moment from 'moment'

Vue.filter('formatDate', function(value) {
  if (value) {
    return moment(value).format('YYYY/MM/DD hh:mm')
  }
})

var vm = new Vue({ // eslint-disable-line no-new
  el: '#app',
  router,
  components: { App },
  template: ''
})
window.vm = vm

} else if(sinceNow <= 1000*60*60*24) {
		let hours = sinceNow.getHours()
		return hours + ' ' + p('hour', hours) + ' ago'
	} else if(sinceNow <= 1000*60*60*24*2) {
		let days = Math.floor(sinceNow / (1000*60*60*24))
		return days + ' ' + p('day', days) + ' ago at ' + value.toTimeString().slice(0, 5)
	} else {
		return (
			lz(value.getDate()) + '/' +
			lz(value.getMonth() + 1) + '/' +
			value.getUTCFullYear()
		); 
	}
});

Vue.filter('stripTags', function (value) {
	let doc = new DOMParser().parseFromString(value, 'text/html')
	return doc.body.textContent || ''
});

Vue.filter('truncate', function (value, length) {
	if(value.length <= length) {
		return value
	} else {
		return value.slice(0, length) + '…'
	}
});
Vue.filter('truncateMid', function (value, length) {
	if(value.length <= length) {
		return value
	} else {
		let firstLen = Math.round(length/2);

render (h) {
        const uppercase = Vue.filter('uppercase')
        return (
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">
                Hi, {this.firstName} {this.lastName}
              </span>
              <p>{uppercase(this.description)}</p>
            </div>
            <div class="card-action">
              <a href="https://vuejs.org/guide/overview.html">Vue.js</a>
            </div>
          </div>
        )
      }
    })

import Vue from 'vue'
import store from './store'
import { dasherize, titleize, upcaseFirstChar } from '@uiengine/util/src/string'
import localize from '../shared/localize'
import { LOCALES } from './util'

Vue.filter('dasherize', dasherize)

Vue.filter('upcaseFirstChar', upcaseFirstChar)

Vue.filter('titleize', titleize)

Vue.filter('bool2string', bool => bool ? 'true' : 'false')

Vue.filter('localize', (key, interpolations) => {
  const id = store.getters['preferences/locale']
  const dict = LOCALES[id]

  return localize(dict, key, interpolations)
})

Vue.filter("prettyRecord", (record) => {
  const props = _.concat(PREFERRED_TITLE_PROPS, _.keys(record));
  for (var prop of props) {
    if (prop[0] != '_' && record[prop] && _.isString(record[prop])) {
      return record[prop];
    }
  }
  return record._id;
});

Vue.filter("prettyJSON", (data) => {
  return JSON.stringify(data, null, 4);
});

Vue.filter("camelToText", (text) => {
  return text.replace(/([A-Z])/g, " $1");
});

Vue.filter("capitalize", (text) => {
  return text.charAt(0).toUpperCase() + text.slice(1);
});

Vue.filter("timeSince", (date) => {
    let seconds   = Math.floor((new Date() - date) / 1000);
    let interval  = Math.floor(seconds / 31536000);

    if (interval > 1) {
      return interval + " years ago";
    }
    interval = Math.floor(seconds / 2592000);
    if (interval > 1) {