vue filters过滤
<template>
<div class="filters">
<h1 v-text="filtersTitle"></h1>
<input v-model="filtersText"/>
<div>{{filtersText | filtersTextChange}}</div>
</div>
</template>
<script>
let vm = {};
export default {
data() {
vm = this;
return {
filtersTitle: 'vue过滤器学习,filters',
arrayList: [
{
"code": "1",
"value": "北京市"
},
{
"code": "2",
"value": "上海市"
},
{
"code": "3",
"value": "广州市"
},
{
"code": "4",
"value": "深圳市"
},
{
"code": "5",
"value": "杭州市"
},
{
"code": "6",
"value": "天津市"
},
{
"code": "7",
"value": "西安市"
},
{
"code": "8",
"value": "武汉市"
},
{
"code": "9",
"value": "长沙市"
}
],
filtersText: '1',
}
},
filters: {
filtersTextChange: function (dataStr) {
let arrayList = vm.arrayList;
let value = '没有这个城市 ';
for (let b of arrayList) {
if (b.code == dataStr) {
value = b.value;
break;
}
}
return value;
}
}
}
</script>

全局过滤器

vue filters过滤的更多相关文章
- vue filters 日期
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue filters中使用data中数据
vue filters中 this指向的不是vue实例,但想要获取vue实例中data中的数据,可以采用下面方法.在 beforeCreate中将vue实例赋值给全局变量app0,然后filters中 ...
- vue filters 时间戳转化成时间格式
vue filters 时间戳转化成时间格式 filters: { formatDate: function (time) { var re = /-?\d+/ var m = re.exec(tim ...
- vue filters过滤器
vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...
- Vue.js示例:GitHub提交(watch数据,created钩子,filters过滤); 网格组件(功能:1.检索,2排序);
GitHub提交 codePen: https://codepen.io/chentianwei411/pen/wEVPZo 注意:频繁看案例,可能会被限制. 重点: 表单输入绑定, 单选按钮的使 ...
- Vue 全局过滤和局部过滤
局部过滤器(放在组件里) filters: { //局部过滤器 FormattingMoney:value=>{ return value==null? '0' : value/100 } }, ...
- vue 时间过滤
1.过滤13位时间戳(以评论时间为例) filters : { formattime2: function (value) { //value为13位的时间戳 var timestamp = Date ...
- VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...
- Vue -- filters 过滤器、倒计时效果
局部过滤器 时间.***号 <div id="wrapper" class="wrapper" style="display: none;&qu ...
随机推荐
- vue.js 深度监测
1.select 控件赋值改变,但是无法获取 解决方法,在监测时手动赋值新值 'model.UseType': { handler(newVal, oldVal) { $("#UseType ...
- Oracle --45 个非常有用的 Oracle 查询语句
日期/时间 相关查询 1.获取当前月份的第一天运行这个命令能快速返回当前月份的第一天.你可以用任何的日期值替换 “SYSDATE”来指定查询的日期.SELECT TRUNC (SYSDATE, 'MO ...
- 大哥带的Orchel数据库时间盲注
0X01Oracle基于延时的盲注总结 0x00 前言 oracle注入中可以通过页面响应的状态,这里指的是响应时间,通过这种方式判断SQL是否被执行的方式,便是时间盲注: oracle的时间盲注通常 ...
- HTTPS协议详解(一):HTTPS基础知识
HTTPS基础知识:HTTPS (Secure Hypertext Transfer Protocol)安全超文本传输协议,是一个安全通信通道,它基于HTTP开发用于在客户计算机和服务器之间交换信息. ...
- Linux shell - shift命令用法(转载)
位置参数可以用shift命令左移.比如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1.$2.$3丢弃,$0不移动.不带参数的shift命令相当于shift 1. 非常 ...
- (转)WebRTC信令控制与STUN/TURN服务器搭建
转:https://rtcdeveloper.com/t/topic/13742 本文将向大家介绍两个方面的知识: WebRTC信令控制 STUN/TURN服务器的搭建 在前面的文章中已经向大家介绍了 ...
- maven 安装jar包命令
以 spring-context-support-3.1.0.RELEASE.jar 为例,在 @3图中已经给出这个 jar 包的 groupId,artifactId,version信息,手动安装的 ...
- vim字体设置
经过多方试验,在win下设置vim的大小终于成功了,备份如下, 现在把gvim7.1更改字体的方法记录如下,一段时间后,可能会失效,对他人造成困扰吧?!^_^ 在_vimrc中写:set guif ...
- Mac下安装lightgbm
Mac下安装lightgbm 1.安装环境 系统 MacOS Mojave 版本10.14.2 Xcode 10.1 $ clang -v Apple LLVM version 10.0.0 (cla ...
- eclipse code recommenders cannot download its model repository index
Cent OS 7 运行 eclipse oxygen 代码提示出现标题所示的错误,解决办法,将网络提供程序设置为手动即可解决. Window->Preference->General-& ...