<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过滤的更多相关文章

  1. vue filters 日期

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue filters中使用data中数据

    vue filters中 this指向的不是vue实例,但想要获取vue实例中data中的数据,可以采用下面方法.在 beforeCreate中将vue实例赋值给全局变量app0,然后filters中 ...

  3. vue filters 时间戳转化成时间格式

    vue filters 时间戳转化成时间格式 filters: { formatDate: function (time) { var re = /-?\d+/ var m = re.exec(tim ...

  4. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  5. Vue.js示例:GitHub提交(watch数据,created钩子,filters过滤); 网格组件(功能:1.检索,2排序);

    GitHub提交 codePen:   https://codepen.io/chentianwei411/pen/wEVPZo 注意:频繁看案例,可能会被限制. 重点: 表单输入绑定, 单选按钮的使 ...

  6. Vue 全局过滤和局部过滤

    局部过滤器(放在组件里) filters: { //局部过滤器 FormattingMoney:value=>{ return value==null? '0' : value/100 } }, ...

  7. vue 时间过滤

    1.过滤13位时间戳(以评论时间为例) filters : { formattime2: function (value) { //value为13位的时间戳 var timestamp = Date ...

  8. VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})

    Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...

  9. Vue -- filters 过滤器、倒计时效果

    局部过滤器 时间.***号 <div id="wrapper" class="wrapper" style="display: none;&qu ...

随机推荐

  1. (47)LINUX应用编程和网络编程之二Linux文件属性

    Linux下的文件系统为树形结构,入口为/ 树形结构下的文件目录: 无论哪个版本的Linux系统,都有这些目录,这些目录应该是标准的.各个Linux发行版本会存在一些小小的差异,但总体来说,还是大体差 ...

  2. spring-servlet.xml

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  3. Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)

    private void SMT(HttpContext context) { string SqlConnection82 = System.Configuration.ConfigurationM ...

  4. 3,、maven修改jar包下载为国内镜像下载地址

    maven 默认的中央仓库是在国外的服务器,下载速度慢,有时候稍不注意就下载出错 通常我将maven的中央仓库修改为阿里云的地址,下载速度很快体验非常好 修改conf下的setting.xml文件 在 ...

  5. windows下eclipse打不开

    报错找不到jre等东西 因为eclipse到不到javaw.exe 将其写入eclipse.ini即可 在eclipse.ini的前面加上 -vm D:\dev_tool\java\jdk1.7.0_ ...

  6. OpenStack Nova Placement API 统一资源管理接口的未来

    目录 目录 Placement API 为何称之为 "未来" 操作对象基本概念 数据库操作样例 Placement API 在创建虚拟机时的调度过程 Placement REST ...

  7. tomcat7源码包编译安装

    tomcat/:作用解析jsp程序.先安装jdk容器.1.下载jdk, wget http://download.oracle.com/otn- pub/java/jdk/8u131- b11/d54 ...

  8. oracle ogg 单实例双向复制搭建(oracle-oracle)--Oracle GoldenGate

    oracle ogg 单实例双向复制搭建(oracle-oracle)--Oracle GoldenGate --继昨天的测试,这一篇实施单实例双向复制(完全重新搭建) --环境不变 db1,db2( ...

  9. 打印一个浮点数组,会输出字符串"Hello, world“ & 浮点数的二进制表示(IEEE 754标准)

    #include <stdio.h> #include<stdlib.h> int main() { float a[3] = { 1143139122437582505939 ...

  10. jmeter的cookie跨线程传递

    测试计划需要设置成独立运行每个线程组获取cookie需要先执行才能使接下来的cookie使用正确执行 登录线程组登录,使用正则表达式提取器提取所需cookie然后使用BeanShellPostProc ...