vue过滤器在v2.0版本用法

最新推荐文章于 2024-02-28 09:38:25 发布
最新推荐文章于 2024-02-28 09:38:25 发布
阅读量3.7w 收藏 8
点赞数 5
分类专栏： js 文章标签： vue 过滤器 vue2 filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShaLiWa/article/details/53330782
版权

1.x写法

<body>
<div id="app">
    {{html|uppercase}}
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:"123",
            html:"abc"
        }
    })
</script>
</body>

但是2.0中已经废弃了过滤器，需要我们自定义

<div id="app">
    {{message|uppercase}}
</div>

//过滤器
Vue.filter('uppercase', function(value) {
  if (!value) { return ''}
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

var vm = new Vue({
  el:'#app',
  data: {
    message: 'test'
  }
})
Vue.filter( id, [definition] )

参数：

{string} id
{Function} [definition]
用法：

注册或获取全局过滤器。

// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

官方文档参考：
http://cn.vuejs.org/v2/api/#filters
http://cn.vuejs.org/v2/api/

一个有思想的新时代农民工
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue过滤器在v2.0版本用法
12-28
1.x写法 <body> <div id=app> {{html|uppercase}} </div> [removed] new Vue({ el:'#app', data:{ msg:123, html:abc } }) [removed] </body> 但是2.0中已经废弃了过滤器，需要我们自定义 <div id=app> {{message|uppercase}} </div> //过滤器 Vue.filter('uppercase', function(value) { if (!value) {
vue使用filter过滤简单实现搜索功能
6块腹肌的博客
08-14 5672
<input type="text" placeholder="请输入搜索内容" v-model="search"> <p v-for="(item, index) in searchMethod" :key="index">{{ item.name }}</p> arr: [ {name: 'qq', baz: '1'}, {name: ...
vue只保留小数点后两位
最新发布
qq_42740298的博客
02-28 865
3.输入时随时监听，小数点后超出两位不允许输入。2.data中设置绑定的内容。1.在input上绑定。
vue 2.0 用filter做表单搜索
山外小楼
12-29 1915
JS部分 search: '', systManage: [ { type: "未知", source: "数据库", operation: "系统管理", content: "查看了系统管理", hot: "192.168.110", time: "2017/12/05" }, co
Vue.js通过filter实现搜索关键字高亮
混世大魔王ya的博客
09-19 632
在 Vue.js 中实现搜索关键字高亮是一项常见的任务，通过使用正则表达式和字符串替换，我们可以轻松地实现这个功能。首先，我们需要创建一个过滤器，用于在模板中实现搜索关键字高亮。在你的 Vue.js 组件的任何一个地方，你可以创建一个名为。一旦我们创建了过滤器，我们就可以在 Vue 组件的模板中应用这个过滤器了。在上面的样式中，我们使用黄色作为背景颜色来突出显示高亮部分。在上面的样式中，我们使用黄色作为背景颜色来突出显示高亮部分。在上面的代码中，我们首先在模板中创建了一个输入框，用于输入搜索关键字。
Vue2中过滤器的用法详解
青春木鱼的博客
12-09 7005
过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。分为全局过滤器和私有过滤器(本地过滤器)2种。这篇文章介绍了Vue2中的过滤器filter使用方法及注意说明，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。
vue过滤器实现日期格式化的案例分析
11-20
说明 今天将要介绍的是vue中的过滤器，并且将实现一个日期格式化的小案例。 大家都知道，我们获取当前日期可以通过Date对象获取。下面我将获取当前时间并打印出来。 console.log(new Date()); 我们获取的是一个标准时间，控制台的输出如下所示。 在实际项目开发中，我们通常获取标准时间后不是直接拿来使用，而是要进行一些操作然后将它显示在页面中，我们将这些操作称作时间格式化。 过滤器 在vue中，我们可以使用过滤器来进行时间格式化。它的写法如下： // Vue.filter(过滤器名称,处理函数) 使用的方式 {{ 过滤器数据| 过滤器名称 }} 具体代码 代码如下
vue时间过滤器(moment)
estrusKing的博客
05-06 5533
JavaScript 日期处理类库，用于日期格式转换的。官网地址 npm下载: npm install moment 方法一 ：局部使用 在需要用的组件中引入： import moment from “moment”; 使用方法 this.num = moment(this.num).format(“YYYY年”); 方法二：全局使用 在全局中配置（main.js文件） // main.js import moment from 'moment' Vue.filter('dateForma
vue-格式化时间-封装时间过滤器
m0_56277111的博客
08-01 158
【代码】vue-格式化时间-封装时间过滤器。
VUE2的过滤器使用
m0_66051368的博客
03-05 141
<template> <div> <!-- 过滤器 {{ 值 | 过滤器 }} --> <!-- filters --> <!-- upper: 能够把值变大写 --> <div>{{ 'gaoda' | upper }}</div> <!-- pow: 计算次幂 --> <div>{{ 2 | pow(3) }}</div> .....
Vue2——过滤器
mantou_riji的博客
07-18 191
定义对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法{{xxx│过滤器名}}xxx会作为参数传递给过滤器，过滤器执行完毕之后返回结果会直接代替页面的{{xxx│过滤器名}}进行显示。（局部过滤器）或{}}（全局过滤器）{{xxx│过滤器名}}或v-bind属性=“xxx|过滤器名"xxx会作为参数传递给过滤器，过滤器执行完毕之后返回结果会直接代替页面的{{xxx│过滤器名}}进行显示。httpshttpshttpshttps。......
Vue2.0系列之过滤器的使用
01-19
vue2.0已经废弃了过滤器，需要自定义过滤器，用于一些常见的文本格式化。 感觉超级好用！！ 过滤器可以用在两个地方：双花括号插值 和 v-bind表达式。 过滤器应该被添加在JavaScript表达式的尾部，由管道符指示。 ...
vue指令v-html使用过滤器filters功能实例
12-13
然而，现在不能使用了，Vue2.0 的过滤器现在只能应用在 {{ }} 和 v-bind 中。 然而，嫌麻烦，还想使用怎么办？ 解决方法 使用全局方法 使用 computed 属性 使用 $options.filters 使用全局方法 put your ...
详解Vue2.0里过滤器容易踩到的坑
11-27
vue2.0里，不再有自带的过滤器，需要自己定义过滤器。定义的方法如下： 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。 Vue.filter('filtername',function(value,参数){ return 参数+value....
vue之页面缓存问题(基于2.0)
热门推荐
一个有思想的新时代农民工的博客
11-12 2万+
比如有一个列表页面，然后列表每项都有一个详情，之前用vue1.x的时候，页面缓存基本没有什么问题。 在vue2.0中出现了列表页面是每次都重新加载数据，但是详情页面却只在第一次加载的时候调用数据，如果返回到列表再进入详情那么页面是不会重新渲染页面，可能是新手吧，这个问题困扰了我很久，一直没有办法解决…… 根据vue-router的官方文档所说，watch: { // 如果路由有变化，会再
vue 如何添加全局函数或全局变量以及单页面的title设置总结
一个有思想的新时代农民工的博客
11-16 1万+
传统的设置title的方法是：document.title = ‘title’ 但是这种写法在iOS的微信上是不兼容的 这里设置title的方法是通过在百度搜索的所谓黑科技，避免了安卓和iOS的不兼容写法首先在index.html中定义一个全局的函数：var setTitle = function (title) { var u = navigator.userAgent
vue 打包后找不到资源文件
一个有思想的新时代农民工的博客
05-13 2898
前一段时间我们写了一个项目，在本地是好的，但是布到线上发现有些字体图标找不到，然后就各种找问题，最后确认是资源文件路径没引用正确导致的， 怎么解决呢： 1、在build的utils文件中配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:'../../', // 此处添加 fallback: 'vue-style-loader'
js 判断数组是否包含某元素
一个有思想的新时代农民工的博客
11-16 2688
方法1、query或者zepto $.inArray(value,array)$.inArray(value,array) 可能产生的一个引用类型的问题，所以用的时候要注意 比如：var testarr=[{"a":"0"},{"b":"1"},{"c":"2"}]; alert($.inArray({"a":"0"},testarr)); //总是返回-1正常写法：var obj={'m':
vue 过滤器的使用 在vue cli中
04-22
可以通过在过滤器目录中创建一个.js文件并在Vue组件中引入来使用过滤器，如下所示： 1. 在项目中创建一个名为“filters”的文件夹。 2. 在该文件夹中创建.js文件并定义要使用的过滤器。 例如，我们创建一个名为“capitalize.js”的文件，并在其中定义一个名为“capitalize”的过滤器，该过滤器可将输入字符串的首字母转换为大写： ``` export default function capitalize(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } ``` 3. 在Vue组件中，使用Vue.filter()方法注册过滤器并将其应用于要格式化的数据。 例如，我们有一个名为“example.vue”的组件，其中包含一个名为“username”的属性，我们想将其格式化为首字母大写。可以使用以下代码： ``` <template> <div> <p>{{ username | capitalize }}</p> </div> </template> <script> import capitalize from '@/filters/capitalize.js' export default { data() { return { username: 'john' } }, filters: { capitalize } } </script> ``` 在上述代码中，我们通过从“capitalize.js”文件中导入“capitalize”过滤器，将其注册到Vue组件中的“filters”对象中。然后，在模板中使用“username | capitalize”语法将过滤器应用于“username”属性，以呈现格式化的输出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值