Vue之过滤器详解
更新时间：2021年11月21日 16:07:33 作者：王同学要努力
这篇文章主要为大家介绍了Vue之过滤器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<h2>现在是{{fmtTime}}</h2>
<!-- methods实现 -->
<h2>现在是{{getFmtTime()}}</h2>
<!-- 过滤器时间实现-->
<h2>现在是{{time | timeFormater}}</h2>
</div>
<div id="root2">
<h2>现在是：{{msg |mySlice }}</h2>
</div>
<script>
Vue.config.productionTip = false;
//全局过滤器
Vue.filter('mySlice', function(value) {
return value.slice(0, 4)
})
new Vue({
el: "#root",
data: {
time: 1637047951556 //时间戳
},
computed: {
fmtTime() {
return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss')
}
},
methods: {
getFmtTime() {
return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss')
}
},
filters: {
timeFormater(value) {
return dayjs(value).format('YYYY年MM月DD HH: mm: ss ')
}
},
})
new Vue({
el: "#root2",
data: {
msg: 'hello world'
}
})
</script>
</body>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
下面小编就为大家分享一篇vue 实现类似淘宝星级评分的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue3 process.env.XXX环境变量不生效的解决方法
这篇文章主要给大家介绍了关于vue3 process.env.XXX环境变量不生效的解决方法,通过文中介绍的方法可以很方便的解决遇到的问题,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了vue实现轮播图帧率播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要介绍了Vue父组件向子组件传值以及data和props的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了vue下载文件以及文件重命名方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了在vant 中使用cell组件 定义图标该图片和位置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
关于element ui的菜单default-active默认选中的问题
这篇文章主要介绍了关于element ui的菜单default-active默认选中的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue@cli3项目模板怎么使用public目录下的静态文件
这篇文章主要介绍了vue@cli3项目模板怎么使用public目录下的静态文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
在项目中会多次使用表格展示数据,不对这个table进行二次封装成我们自己想要的,重复的代码量的工作会比较大,下面这篇文章主要给大家介绍了关于elementUI el-table二次封装的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue引入cesium问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论