Vue之过滤器的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
/* 过滤器的使用：为了将数据做一些处理后才渲染出来，
它可以用在组件的内部为该组件服务，也可以声明为全局的过滤器
下面来看下组件里面过滤器的用法:首先在组件里定义后过滤器的方法，
然后在使用时使用：要过滤的value | 过滤器名 即可。
*/
var App = {
template: `<div>我是局部组件～
<p>我是使用过滤器后的时间： {{ time | myTimeFilter}}</p>
</div>`,
data(){
return {
time: '2019-06-25'
}
},
// 声明过滤器
filters: {
// 过滤器将日期中的-替换为/
myTimeFilter(value) {
return value.replace(/-/g, '/');
}
}
};
new Vue({
el: '#app',
// 使用局部组件
template: `
<App />
`,
data:function(){
return {}
},
// 挂载局部组件
components: {
App
}
});
</script>
</body>
</html>
Vue之过滤器的使用的更多相关文章
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
- vue filters过滤器
vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...
- vue的过滤器
Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
- VUE：过滤器及日期格式化moment库
VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...
- 六、vue基础--过滤器定义
七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...
- vue 时间过滤器
过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...
- vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
随机推荐
- pythonchallenge 2
pythonchallenge是一个很有意思的学习python的网站,通过用程序解开一个谜,可以进入到下一个level,总共有几十个level,网址是http://www.pythonchallen ...
- ccflow_002.表单引擎与流程引擎的关系
本节主要内容 表单.数据.流程引擎的关系 图形展示三者之间的关系 流程编号和节点编号命名规则 这里的206就是这个流程的编号 2601:01就是当前节点的编号 流程编号206转换为int类型之后加上0 ...
- （水题）洛谷 - P1553 - 数字反转（升级版） - 字符串格式转换
https://www.luogu.org/problemnew/show/P1553 忘记给整数加上前导零去除的代码了.其实不去也可以,额外的进位用一个carry另外存起来就好. #include& ...
- 洛谷 - P1739 - 表达式括号匹配 - 模拟 - 栈
https://www.luogu.org/problemnew/show/P1739 虽然应该是用栈的……但是直接模拟就可以了. #include<bits/stdc++.h> usin ...
- Swift3.0 UITextView写反馈界面
效果图 适配用的 SnapKit 使用介绍: http://www.hangge.com/blog/cache/detail_1097.html private func creationTextV ...
- 51nod 1138 【数学-等差数列】
思路: 很显然每个连续的序列都是等差数列, 那么我们利用等差数列求和公式. S=(a1+a1+k-1)k/2=(2·a1+k-1)*k/2;a1是首项,k是个数. 枚举k,首项最小为1,k最大,具体不 ...
- mysql 用 group by 和 order by同时使用
首先,这是不可能实现的 mysql的查询的顺序 select -> from-> where->group by->having->order by. 但mysql的解析 ...
- 使用c++的一些建议
1: 不要使用宏,用const或enum定义常量 用inline避免函数的额外调用(使用inline的函数,块里面尽量不要使用循环和递归) 用template去荷花一些函数或者类型 用namespac ...
- Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) B
Description Bear Limak examines a social network. Its main functionality is that two members can bec ...
- 1-20StringBuffer简介
StringBuffer是一个字符串缓冲区,如果需要频繁的对字符串进行拼接时,建议使用StringBuffer. 工作原理 StringBuffer的底层是char数组,如果没有明确设定,则系统会默认 ...