vue学习二（过滤器）
1.全局过滤器
{{user.gender|gfilter}}
Vue.filter("gfilter",function (val) {
if (val == 1) {
return "男...";
} else {
return "女...";
}
})
2.局部过滤器
例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9
10 <body>
11 <script src="../node_modules/vue/dist/vue.js"></script>
12 <!--过滤器常用户来处理文本格式化的操作 过滤器还可以用在两个地方：花括号查之和v-bind 表达式-->
13 <div id="app">
14 <ul>
15 <li v-for="user in users">
16 {{user.id}} ==> {{user.name}} ==> {{user.gender==1?"男":"女"}}
17 {{user.gender|genderfilter}}
18 {{user.gender|gfilter}}
19 </li>
20 </ul>
21 </div>
22 <script>
23
24 Vue.filter("gfilter",function (val) {
25 if (val == 1) {
26 return "男...";
27 } else {
28 return "女...";
29 }
30 })
31
32
33 let vm = new Vue({
34 el: "#app",
35 data: {
36 users: [{ id: 1, name: "wanghaha1", gender: 1 },
37 { id: 2, name: "wanghaha2", gender: 0 }]
38 },
39 filters: { //此为局部过滤器
40 genderfilter(val) {
41 if (val == 1) {
42 return "男";
43 } else {
44 return "女";
45 }
46 }
47 }
48 })
49
50
51
52 </script>
53 </body>
54
55 </html>
vue学习二（过滤器）的更多相关文章
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- Vue学习之过滤器和自定义指令小结（三）
过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...
- vue教程(二)--过滤器和监视改动功能
过滤器filter: 1.将数据进行添油加醋的操作. 2.过滤器分两种: 组件内的过滤器(组件内有效). 全局过滤器 组件内:filters:{过滤器名:过滤器函数fn},fn内通过return 返回 ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- Vue学习二：v-model指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...
- vue学习二:
vue的常用标签: 1.<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径. 2.v-bind动态绑定指令,格式为:v-bind: ...
- 02.VUE学习二之数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- vue 学习二 深入vue双向绑定原理
vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...
- vue 学习 二
动画 <transition name="fade"> <p v-if="show">hello</p> </tran ...
随机推荐
- 欧拉OpenEuler安装MySQL8
1. 安装mysql tar -xvf mysql-8.0.21-linux-glibc2.12-x86_64.tar mv mysql-8.0.21-linux-glibc2.12-x86_64 / ...
- 为什么 .NET8线程池 容易引发线程饥饿
一:背景 1. 讲故事 最近时间相对比较宽裕,多写点文章来充实社区吧,这篇文章主要还是来自于最近遇到的几例线程饥饿(Task.Result)引发的一系列的反思和总结,我觉得.NET8容易引发饥饿的原因 ...
- Activiti、Flowable和Camunda选型和对比
https://camunda.com/https://www.jianshu.com/p/5942c4ee513chttps://zhuanlan.zhihu.com/p/484107368http ...
- DynamoDB-键值存储
什么是DynamoDB? DynamoDB 是一个你什么也不用管的 NoSql 数据库.记得给 AWS付账单就可以. 在2004年的时候, Amazon 发现 Oracle 数据库都不够用了.为了还能 ...
- selenium学习-常用方法
id_#当前元素的ID tag_name#获取元素标签名的属性 text#获取该元素的文本. click()#单击(点击)元素 submit()#提交表单 clear()#清除一个文本输入元 ...
- SM9-密钥交换
算法过程 代码实现 ///************************************************************************ // File name: ...
- Codeforces Round 967 (Div. 2)
题目链接:Codeforces Round 967 (Div. 2) - Codeforces 总结:B题没测试就交wa一发,C题一直没想到怎么回溯,哎. A. Make All Equal tag: ...
- Vite构建项目记录
背景 微信推送了一些公众号文章,所 vite 已经跟新到 v6 版本了,于是构建一个 vite 项目看下啥变化 过程 直接打开 https://vite.dev/ 官网,切换问中文语言,找到此处 ht ...
- Mac安装Zookeeper
软件版本:3.4.10 一.软件下载 下载链接:http://archive.apache.org/dist/zookeeper/ 解压缩:tar -zxf zookeeper-3.4.10.t ...
- C# 钩子函数使用
1. 什么是钩子 hook(钩子)是windows提供的一种消息处理机制平台,是指在程序正常运行中接受信息之前预先启动的函数,用来检查和修改传给该程序的信息,(钩子)实际上是一个处理消息的程序段,通过 ...