| |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| -> JavaScript知识库 -> vue过滤器 -> 正文阅读 |
|
|
[JavaScript知识库]vue过滤器 |
|
代码实例(格式化时间戳)： <!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"> ????<title>Document</title> ????<script?src="../js/vue.js"></script> ????<script?src="../js/axios-0.18.0.js"></script> ????<script?type="text/javascript"?src="../js/dayjs.min.js"></script> </head> <body> ????<div?id="root"> ????????<h2>显示格式化之后的时间</h2> ????????<span>计算属性实现格式化时间</span> ????????<h3>现在是{{fmatime}}</h3> ????????<span>调用methods实现格式化时间</span> ????????<h3>现在是{{getFmTime()}}</h3> ????????<span>过滤器实现时间格式化</span> ????????<h3>{{time?|?timeFomcater}}</h3> ????????<span>过滤器传参</span> ????????<h3>{{time?|?timeFomcater('YYYY-MM-DD')?|mySilce}}</h3> ????</div> ????<script?type="text/javascript"> ????????Vue.config.productionTip=false ????????new?Vue({ ????????????el:'#root', ????????????data()?{ ????????????????return?{ ????????????????????time:1641825352965 ????????????????} ????????????}, ????????????computed:{ ????????????????fmatime(){ ????????????????????return?dayjs(this.time).format('YYYY-MM-DD?HH:mm:ss') ???????????????????? ????????????????} ????????????}, ????????????methods:?{ ????????????????getFmTime(){ ????????????????????return?dayjs(this.time).format('YYYY-MM-DD?HH:mm:ss') ????????????????} ????????????}, ???????????filters:?{ ????????????timeFomcater(value,str='YYYY-MM-DD?HH:mm:ss'){ ????????????????return?dayjs(value).format(str) ????????????}, ????????????mySilce(value){ ????????????????return?value.slice(0,4) ????????????} ???????????} ????????}) ????</script> </body> </html> 过滤器语法： 插值语法：{{time?|?timeFomcater}}//局部变量? 过程：就是将time放入timeFomcater，timeFomcater默认接收到的值：value，获取到return回来的值，最终替换掉time?|?timeFomcater，具体视频可以去上网查看尚硅谷 过滤器可以额外接收参数：{{time?|?timeFomcater('YYYY-MM-DD')?|mySilce}} 过滤器可以使用v-bind，不可以使用v-model |
|
|
| JavaScript知识库 最新文章 |
| ES6的相关知识点 |
| react 函数式组件 & react其他一些总结 |
| Vue基础超详细 |
| 前端JS也可以连点成线（Vue中运用 AntVG6） |
| Vue事件处理的基本使用 |
| Vue后台项目的记录 （一） |
| 前后端分离vue跨域，devServer配置proxy代理 |
| TypeScript |
| 初识vuex |
| vue项目安装包指令收集 |
|
|
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| 360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/24 12:49:05- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |