Rumah > Artikel > hujung hadapan web > Vue过滤器filters使用详解
这次给大家带来Vue过滤器filters使用详解,Vue过滤器filters使用的注意事项有哪些,下面就是实战案例,一起来看一下。
示例代码
采用vue单文件组件,使用moment插件格式化日期
<template> <p> <h1>{{date | dateFormat}}</h1> </p> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() { return { date: new Date() } }, filters: { dateFormat(val) { return moment(val).calendar(); } } } </script>
说明
过滤器内是没有this引用的,过滤器内的this是undefined,所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。
ps:下面看下Vue 过滤器的基本用法
// 注册 Vue.filter('my-filter', function (value) { // 返回处理后的值 }) // getter,返回已注册的过滤器 var myFilter = Vue.filter('my-filter') //在mustache中使用 {{ msg | uppercase }}
或
//在标签中使用 <input type="password" v-model="psw | validate">
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci Vue过滤器filters使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!