vue.js_05_vue.js的过滤器
1.过滤器的定义和使用
实现：将页面的中的单纯替换成，用户传来的文字。
全局过滤器：所有的Vue对象都可以使用
<body>
<div id="app">
//可以使用多个过滤器 第一个过滤器将返回的结果作为参数传递给第二个过滤器
<p>{{msg| msgFilter('疯狂')| test}}</p>
</div>
<script>
//定义一个msgFilter过滤器
Vue.filter('msgFilter',function(msg,arg){
return msg.replace(/单纯/g,arg) });
Vue.filter('test',function(msg){
return msg+'============'
});
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我是一个单纯的人，如今我已不再单纯',
},
methods: {}
})
</script>
</body>
2.私用的过滤器
只用创建的Vue对象才可以使用
如果私有和公用的过滤器名字相同则依据就近原则使用
实现：通过一个私有的过滤器，实现时间的格式化
<td>{{item.ctime | dateFormat}}</td>
methods: {
filters: {
//如果私有的过滤器和全局过滤器的名称一致 那么默认去找私有的过滤器
dateFormat: function(datestr) {
//格式化时间yyyy-MM-dd
var date = new Date()
var y = date.getFullYear()
//格式化数字 不足两位补充'0'
var m = (date.getMonth() + 1).toString().padStart(2, '0')
var d = date.getDate().toString().padStart(2, '0')
return `${y}-${m}-${d}`
}
},
vue.js_05_vue.js的过滤器的更多相关文章
- Vue自带的过滤器
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 一 过滤器写法 {{ message | Filter}} 二 ...
- Vue node.js商城-购物车模块
一.渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){ return { car ...
- vue 中全局filter过滤器的配置及使用
在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
- vue中filters（过滤器）的使用
在vue中使用filters Vue.js自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- Vue框架:挂载点-过滤器-事件指令-表单指令
近期学习安排 1.Vue框架 前台html+css+js框架,是不同于js与JQuery的数据驱动框架, 学习的知识点:指令 | 实例成员 | vue项目 2.drf框架 django的插件,完成前 ...
- vue学习(十五) 过滤器简单实用
vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式 v-bind表达式 由管道符指示 //过滤器调用时候的格式 {{ name ...
- vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined
我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
随机推荐
- [转]MySQL InnoDB引擎索引长度受限怎么办
mysql> CREATE TABLE `tb` (-> `a` varchar(255) DEFAULT NULL,-> `b` varchar(255) DEFAULT NULL ...
- Jmeter-BeanShell断言：将数据库结果封装成list作为参数
import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjso ...
- 重装系统后配置原有的mysql
1.重装系统后配置原有的mysql 2.修改 my.ini [修改 basedir:MySQL当前所在路径 datadir 数据存放路径] [mysqld] # 设置3306端口 port= # 设 ...
- kmp变形，带通配符的kmp——华科校赛E 好题
https://blog.csdn.net/a302549450/article/details/80948741?tdsourcetag=s_pctim_aiomsg 上面是题解的链接.., 其实和 ...
- hexo next 主题 : 实现点击跳转到文章的时候文章的页面自动实现滚轮效果，向下滚动到阅读的位置。
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 博主的博客希望实现能够在点击到某个文章 ...
- AtCoder ABC 130E Common Subsequence
题目链接:https://atcoder.jp/contests/abc130/tasks/abc130_e 题目大意 给定一个长度为 N 的序列 S 和一个长度为 M 的序列 T,问 S 和 T 中 ...
- 宇宙最强 IDE：VS 2019 正式发布
作者:局长 来源:www.oschina.net/news/105629/ 如约而至,微软已于今天推出 Visual Studio 2019 正式版,一同发布的还有 Visual Studio 201 ...
- Java核心-02 Exception和Error有什么区别？
今天我要问你的问题是,请对比 Exception 和 Error,另外,运行时异常与一般异常有什么区别? 典型回答 Exception 和 Error 都是继承了 Throwable 类,在 Java ...
- Pyinstaller打包Web项目
最近需要用python打包一个单页面网页demo,于是准备用python包pyinstaller来打包程序.网上搜索了一下,大部分教程都是打包非web项目,这里分享一下打包简单网页demo的过程. 系 ...
- JS数组 一起组团（什么是数组）一个数组变量可以存放多个数据
一起组团(什么是数组) 我们知道变量用来存储数据,一个变量只能存储一个内容.假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果需要存储更多数据,那就会变的更麻烦 ...