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 ...
随机推荐
- HDU 6191 Query on A Tree(字典树+离线)
Query on A Tree Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Othe ...
- 南京网络赛 E K Sum
K Sum 终于过了这玩意啊啊啊==== 莫比乌斯反演,杜教筛,各种分块,积性函数怎么线性递推还很迷==,得继续研究研究 #include<bits/stdc++.h> using nam ...
- 后盾网lavarel视频项目---laravel 使用laracasts/flash插件提示信息
后盾网lavarel视频项目---laravel 使用laracasts/flash插件提示信息 一.总结 一句话总结: laracasts/flash插件的效果就是一个弹出的boostrap模块框, ...
- 后盾网lavarel视频项目---页面post方式提交之后动态弹出错误信息
后盾网lavarel视频项目---页面post方式提交之后动态弹出错误信息 一.总结 一句话总结: 1.思路和我想的一样,有错误的时候弹出提示错误消息的模态框就好,没有错误的时候不管它 2.把模态框的 ...
- webpack 自动运行,及打包 img css json 的操作 npm插件的使用方法
没有指令操作的属性生产环境,有指令操作的属于开发环境 webpack:输入指令后,便会自动开启一个浏览器 需要插件:open-browser-webpack-plugin 生产环境 想使用 node. ...
- ES6 暂时性死区
在ES6中,声明变量新增了两个关键字:let命令和const命令 如果在区块中存在let或者const命令时,任何变量都必须在声明之前使用,无论是区块外部的全局变量或者是区块内部的变量: /* 区块外 ...
- 十、Springboot之thymeleaf与jsp共存
: pom.xml添加依赖 <!--thymeleaf整合JSP需要用到下面的依赖--> <dependency> <groupId>org.thymeleaf&l ...
- RabbitMQ安装及其中遇到的问题解决方案
参考官方文档:https://www.rabbitmq.com/install-debian.html#apt 第一步: # import PackageCloud signing key wget ...
- fiddler之模拟请求超时和弱网模式
在针对手机端测试时,很多情况下我们需要测试响应超时和弱网情况的响应情况.此时可以使用fiddler提供的断点和弱网功能进行测试. 1.请求超时 设置断点,是请求响应超时.查看请求结果. Rules-- ...
- 数据科学家人才危机现象,是FOMO还是Silver?
数据科学家人才危机现象,是FOMO还是Silver? 数据科学家的人才短缺和薪水高涨已经达到了顶板,未来还会持续下去吗? 在过去几年中,高级分析(#大数据#分析)空间一直经历着严重的FOMO(害怕错过 ...