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 ...
随机推荐
- Qt音视频开发10-ffmpeg控制播放
一.前言 很多人在用ffmpeg做视频流解码的时候,都会遇到一个问题,如何暂停,如果打开的是本地视频文件,暂停你只需要停止解码即可,但是视频流你会发现根本没用,一旦你停止了解码,下次重新解码的时候,居 ...
- 基于Xxl-Job,dataX设计的数据同步和可视化任务编排工具
使用vue3对xxl-job进行重构,并集成datax工具实现不同数据源的数据同步,支持glue模式,并新增存储过程调用,api任务调度和可视化任务编排,支持单任务-单任务串并联,单任务-任务集串并联 ...
- lottie-web动画库在HTML5页面中和在vue项目中的两种使用方式
本文主要介绍lottie-web动画库在HTML5页面中和在vue项目中的两种使用方式. 1.在HTML5页面中的使用方式 具体使用步骤详见下面的代码: <!DOCTYPE html> & ...
- Android-studio-ide-201.7042882-windows-4.1.2项目卡在Gradle: Download gradle-6.5-bin.zip
现象描述: Android-studio-ide-201.7042882-windows-4.1.2项目卡在Gradle: Download gradle-6.5-bin.zip,如下所示: 原因分析 ...
- Java子线程无法获取Attributes的解决方法
在Java多线程编程中,开发者经常会遇到子线程无法获取主线程设置的Attributes的问题.Attributes通常用于存储与当前线程相关的数据,尤其在Web应用中,它们常用于请求上下文的管理.然而 ...
- HashMap源码解析-JDK18
引言 HashMap在JDK1.8和1.7中差异较大,在JDK1.8中HashMap引入了红黑树,优化减少了哈希冲突,提高了哈希表的存取效率. 本篇文章分析的就是JDK1.8中的HashMap源码. ...
- Android 系统使RNDIS网卡上网
背景说明: 一位台湾客户需要采购一批SIMCOM SIM6600CE模组用于Tinker board2s,需要适配Debain系统和Android系统. 主要修改点: 1.defconfig 增加RN ...
- 记录socket的使用
今天记录一下socket的基本使用方法,直接上代码 initWebSocket() { //初始化weosocket const wsuri = "socket地址";//地址以w ...
- WPF 透明背景窗体
<Window x:Class="WpfApplication8.MainWindow" xmlns="http://schemas.microsoft.com/w ...
- redis启停shell脚本
启停脚本(redis-5.0.5) 一.编辑脚本 vim /u01/redis/redisServer.sh #!/bin/sh # # Simple Redis init.d script conc ...