vue 中 filter 的使用与注册

七亿少女的劫丨

1.filterBy 输入过滤与orderBy 排序过滤
2.字符串的filter操作

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>filter</title><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
label{color: red;
}
</style>
<body><div id="app"><label >输入框过滤</label><br /><input type="text" v-model="searchText"><ul><li v-for="car in cars|filterBy searchText in 'name'">{{car.name}}</li><br /><label>按tag的id从小到大排列</label><li v-for="car in cars|orderBy fileid reverse ">{{car.name}}</li><!-- 引入vue1.0版本  使用filteBy ,orderBy --></ul><input type="text" v-model="msg"><br /><label>首字母大写：{{msg| capitalize}}</label> <br /><label>大写：{{msg| uppercase}}</label> <br /><label>小写：{{msg| lowercase}}</label> <br /><label>反转：{{msg| reverse}}</label> <br /></div>
</body>
<script src="vue-1.0.15.js"></script>
<script>Vue.filter('reverse', function (value) {return value.split('').reverse().join('');})new Vue({el: '#app',data: {searchText: '',fileid: 'tag',reverse: false,msg: '',cars: [{name: '1-快车',tag: 1},{name: '3-顺风车',tag: 3},{name: '2-专车',tag: 2},{name: '0-出租车',tag: 0}]}})
</script>
</html>

ps:vue js 2.0中已摒弃，需引入vue 1.0 版本。

vue 中 filter 的使用与注册相关推荐

Vue中filter函数过滤器的使用
filters是什么? filters顾名思义是一个过滤器,就是对数据进行过滤筛选,将数据转化为我们想要的格式,但是他不会改变原始数据. filters分为两类一:局部过滤器局部过滤器的特点:只能 ...
Vue中filter清空数组的空值，在computed处理
数组内空值清空后 computed: {tagsArray () {return this.ticketDetail.tags?.filter((item) => item!='')}, } ...
Vue中，当组件同时注册单机事件（@click）和双击事件（@dblclick）时，处理事件冲突
背景: 示例代码: <template><div ><button @click="clickHandler" @dblclick="dbl ...
3d饼图 vue_3D 饼图在 VUE 中的实现
最近有多位读者反应,3D 饼图在 VUE 环境里跑不通.可我其实是一个先学 ECharts 后学 Javascript 的前端外行,再加上读者往往也没有告诉我具体的报错信息是什么,所以一时也没能帮读者 ...
在vue中如何使用百度地图
在vue中如何使用百度地图在vue中如何使用百度地图注册百度开发者账户 ,然后在应用管理中创建账号,ak将是使用百度地图的秘钥,如下所示: 使用npm安装组件, npm install vue-b ...
vue 中的el表达式_Vue中vue.filter()的使用方法介绍（过滤）
本篇文章给大家带来的内容是关于Vue中vue.filter()的使用方法介绍(过滤),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Vue过滤器 {{msg |msgFormat}} ...
Vue中的过滤器(filter)
一.Vue中的过滤器是什么过滤器(filter)是输送介质管道上不可缺少的一种装置,大白话,就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用 ...
Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件
本篇博客基于Vue2.x 官方文档:https://cn.vuejs.org/v2/guide/instance.html 最近和同学合作一个设备信息管理的小项目,而同学找的模板不是前后端分离的因此 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...

vue 中 filter 的使用与注册

七亿少女的劫丨

vue 中 filter 的使用与注册相关推荐

最新文章

热门文章