Vue过滤器基本使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue过滤器基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在Vue 2中，你可以使用 filters 选项来定义过滤器。以下在组件中定义和使用过滤器的简单例子：

1、app.vue 使用methods实现：

<template>
  <div>
    {{ uppercase(message) }}
    <h3>
      <h3 :x="mySlice(msg)">Title</h3>
    </h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello World",
      time: 1621561377603,
      msg: "你好啊，CSDN！！！",
    };
  },
  methods:{
    mySlice(value) {
      return value.slice(0, 7);
    },
    uppercase(value) {
      return value.toUpperCase();
    }
  }
};
</script>

2、使用filters配合computed计算属性实现：

<template>
  <div>
    {{ filteredMessage }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    };
  },
  computed: {
    filteredMessage() {
      return this.$options.filters['myfilter'](this.message);
    }
  },
  filters: {
    myfilter(value) {
      return value.slice(0, 4);
    }
  }
};
</script>

3、引入其他组件FilterFix.vue实现：
app.vue

<template>
  <div>
    {{ nself }}
    <FilterFix/>
  </div>
</template>

<script>
import FilterFix from './components/FilterFix.vue'

export default {
  name: 'App',
  data() {
    return {
      message: "Hello World!!!",
    };
  },
  components: {
    FilterFix,
  },
  computed: {
    nself() {
      return this.$options.filters['myfilter'](this.message);
    },
  },
  filters: {
    myfilter(value) {
      return value.slice(0, 7);
    },
  },
};
</script>

FilterFix.vue

<template>
  <div>
    {{ $options.filters.myfilter(message) }}
  </div>
</template>
  
  <script>
export default {
  name: "filter-fix",
  data() {
    return {
      message: "Hello World!!!",
    };
  },
  filters: {
    myfilter(value) {
      return value.slice(0, 9);
    },
  },
};
</script>

main.js文章来源地址https://www.toymoban.com/news/detail-485609.html

import Vue from 'vue'
import App from './App.vue'
new Vue({
    render: h => h(App)
}).$mount('#app')

到了这里，关于Vue过滤器基本使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Vue过滤器基本使用

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2