过滤器 filters(全局) 计算属性

<template>
  <div>
    <div>{{ i }}</div>
    <button @click="i++">+</button>
    <button @click="add">追加</button>
    <hr />
    <div>{{ msg | time|hh }}</div>

    <div>{{ msg2 }}</div>

    <div>{{ demo() }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
      i: 1,
    };
  },
  // 计算属性
  computed: {
    msg2() {
      return this.msg.toUpperCase();
    },
  },
  // 过滤
  filters: {
    time(e) {
      return e.toUpperCase();
    },
    // hh(e){
    //   return e+'world'
    // }
  },
  methods: {
    demo() {
      return this.msg.toUpperCase();
    },
    add() {
      this.msg += "world";
    },
  },
};
</script>

<style>
</style>

全局 在main.js中写

// 全局过滤
Vue.filter('hh', function (e) {
  return e + 'world'
})