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>
<!-- 导入Vue的包 -->
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<!-- 这里 {{ data数据 | 定义的过滤器的名称（传入的参数）}} -->
<p>{{ msg | msgFormat('疯狂', 'abc') | test }}</p>
<p>{{ msg1 | test('皇上') }}</p>
<p>{{ msg2 | test1() }}</p>
</div> <script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
// 正则的方式
return msg.replace(/单纯/g, arg + arg2)
})
// 直接字符串替换
Vue.filter('test', function (msg1, arg, arg2) {
return msg1.replace('奴才', arg)
}) // 这里直接拼接字符串
Vue.filter('test1', function (msg2) {
return '我娘' + msg2
}) // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年',
msg1: '奴才！还记得大明湖畔的夏雨荷吗',
msg2: '就是那年的夏雨荷'
},
methods: {}
});
</script>
</body> </html>
Vue 中的过滤器的使用的更多相关文章
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
- 第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue中的过滤器
过滤器 过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应 ...
- Vue中全局过滤器期与局部过滤器期的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中，过滤器的使用方法！
Vue.js允许自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和v-bind表达式.过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示:(借官方的 ...
- 简述Vue中的过滤器
1.过滤器的基本概念 概念:本质上是函数: 作用:用户输入数据后,它能够进行处理,并返回一个数据结果:(无return语句不会报错,但是这种过滤器没有丝毫意义) 格式:管道符( | )进行连接,而 ...
- 去除富文本中的html标签及vue、react、微信小程序中的过滤器
在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...
- vue中使用some删除list中的数据
在vue中可以使用some方法查找需要删除的所以 this.list.some((item, i) => { if (item.id == id) { this.list.splice(i, 1 ...
- Vue学习之过滤器和自定义指令小结（三）
过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...
随机推荐
- PHP正则表达式判断身份
//身份证验证 $id_card = ''; $preg_card="/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d ...
- [Vue CLI 3] 插件开发之 registerCommand 到底做了什么
首先,我们看到在 package.json 中有 scripts 的定义: "scripts": { "serve": "vue-cli-servic ...
- 源码：自己用Python写的iOS项目自动打包脚本
http://www.cocoachina.com/ios/20160307/15501.html 什么?又要测试包! 做iOS开发几年了,每天除了码代码,改Bug之外,最让我烦恼的莫过于测试的妹子跑 ...
- 算法复杂度表示（大O表示法）
- 概念: 大O表示法:称一个函数g(n)是O(f(n)),当且仅当存在常数c>0和n0>=1,对一切n>n0均有|g(n)|<=c|f(n)|成立,也称函数g(n)以 ...
- 【JZOJ4788】【NOIP2016提高A组模拟9.17】序列
题目描述 输入 输出 样例输入 1 5 2 1 3 0 3 2 2 0 1 0 样例输出 1 数据范围 解法 考虑没有模的情况,问题就仅仅只是简单的差分问题(广告铺设): 设r[i]是第i位需要加的次 ...
- 初识Django(DNS原理及web框架)
DNS的原理 假设www.abc.com的主机要查询www.xyz.abc.com的服务器ip地址. 知识点 1.hosts文件:以静态映射的方式提供IP地址与主机名的对照表,类似ARP表 2.域:a ...
- oracle怎么捕获用户登录信息，如SID，IP地址等
可以利用登录触发器,如 CREATE OR REPLACE TRIGGER tr_login_record AFTER logon ON DATABASE DECLARE miUserSid NUMB ...
- 某input元素值每隔三位添加逗号跟去掉逗号
//每隔三位数字加一个逗号function moneyformat(s) { var reg = /.*\..*/; if (reg.test(s) == true) { n ...
- html5实现下拉加载
介绍: 实现手机下拉自动加载数据. 原理: 通过检测页面内容距离加上当前滚动的距离大于或等于滚动距离总长时,调用ajax数据加载 事例: var myMoreInfo = new iMoreInfo( ...
- 《mysql必知必会》笔记3（插入、更新、删除、创建删除更新表、视图）
十九:插入数据 1:insert语句用来将行插入数据表中,可以插入完整的行.行的一部分.插入多行.插入某些查询的结果. 2:不指定列名,可以这样插入: insert into customers va ...