郑州网站建设兼职,城乡住建局官网,什么公司网站建设做的好,西宁做网站君博示范第071个 查看专栏目录: VUE ------ element UI 专栏目标
在vue和element UI联合技术栈的操控下#xff0c;本专栏提供行之有效的源代码示例和信息点介绍#xff0c;做到灵活运用。 提供vue2的一些基本操作#xff1a;安装、引用#xff0c;模板使用#xff0c;computed本专栏提供行之有效的源代码示例和信息点介绍做到灵活运用。 提供vue2的一些基本操作安装、引用模板使用computedwatch生命周期(beforeCreatecreated,beforeMountmounted, beforeUpdateupdated, beforeDestroydestroyedactivateddeactivatederrorCapturedcomponents)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-ifv-onv-prev-cloakv-oncev-model v-html, v-text, keep-aliveslot-scope filters, v-bind.stop, .native, directivesmixinrender国际化Vue Router等 本文章目录 专栏目标Filter介绍使用步骤如下示例效果图示例源代码 Filter介绍
Vue.js 中的过滤器Filter是一种用于处理文本的自定义函数可以在模板中直接使用。过滤器可以用在两个地方双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部由“管道”符号|表示。
使用步骤如下 定义过滤器在 Vue 实例或组件的 filters 属性中定义一个函数该函数接收一个参数需要过滤的文本并返回过滤后的文本。 在模板中使用过滤器在需要使用过滤器的地方将过滤器的名称添加到表达式后面用管道符|分隔。
示例效果图 示例源代码
/*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2024-02-06
*/templatediv classdjs-boxdiv classtopBoxh3vue中filters的使用方法图文示例/h3div大剑师兰特, 还是大剑师兰特gis-dajianshi/div/divdiv classdajianship变化前{{ message}} filter变化后{{ message | capitalize }}/pp变化前{{ price }} filter变化后{{ price | currency }}/pp变化前{{ date }} filter变化后{{ date | formatDate }}/p/div/div
/templatescriptexport default {data() {return{message: hello world,price: 1234.56,date: 2022-01-01}},filters: {capitalize: function(value) {if (!value) return ;value value.toString();return value.charAt(0).toUpperCase() value.slice(1);},currency: function(value) {if (!value) return ;return value.toFixed(2);},formatDate: function(value) {if (!value) return ;return new Date(value).toLocaleDateString();}}}
/script
style scoped.djs-box {width: 1000px;height: 650px;margin: 50px auto;border: 1px solid teal;}.topBox {margin: 0 auto 0px;padding: 10px 0 20px;background: teal;color: #fff;}.dajianshi {width: 98%;height: 420px;margin: 5px auto 0;border:1px solid #369;padding-top: 100px;}p{ font-size: 30px;}
/style
在这个示例中我们定义了三个过滤器capitalize、currency 和 formatDate。capitalize 用于将文本的首字母大写currency 用于将数字转换为人民币格式formatDate 用于将日期字符串格式化为本地日期格式。然后在模板中我们将这些过滤器应用到了 message、price 和 date 数据属性上实现了相应的文本处理功能。
