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

 更新时间:2017年06月01日 09:51:06   作者:莎莉哇  
本篇文章主要介绍了vue过滤器在v2.0版本用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue package.json文件的使用及说明

    vue package.json文件的使用及说明

    `package.json`是Node.js和npm项目的核心配置文件,定义了项目的元数据和依赖项,在Vue项目中,它管理依赖、提供脚本命令、存储项目信息,并通过语义化版本控制确保项目稳定
    2025-01-01
  • 解决axios发送post请求上传文件到后端的问题(multipart/form-data)

    解决axios发送post请求上传文件到后端的问题(multipart/form-data)

    这篇文章主要介绍了如何使用axios发送post请求上传文件到后端(multipart/form-data),本文给大家带来了问题原因及解决方案,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 浅谈vite和webpack的性能优化和区别

    浅谈vite和webpack的性能优化和区别

    本文主要介绍了浅谈vite和webpack的区别,从性能优化的几个方便讲解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue页面更新patch的实现示例

    vue页面更新patch的实现示例

    这篇文章主要介绍了vue页面更新patch的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Vue跨端渲染实现多端无缝衔接

    Vue跨端渲染实现多端无缝衔接

    这篇文章主要介绍了Vue跨端渲染实现多端无缝衔接,Vue跨端渲染是一种基于Vue框架的跨平台开发技术,能够实现Web、iOS和Android三端的无缝衔接,提高开发效率和用户体验
    2023-05-05
  • vuex存储数组(新建,增,删,更新)并存入localstorage定时删除功能实现

    vuex存储数组(新建,增,删,更新)并存入localstorage定时删除功能实现

    这篇文章主要介绍了vuex存储数组(新建,增,删,更新),并存入localstorage定时删除,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue实现前端控制动态路由的示例代码

    vue实现前端控制动态路由的示例代码

    本文主要介绍了vue实现前端控制动态路由的示例代码,通过这些步骤,可以有效地根据用户权限动态渲染前端路由,实现多用户权限系统,感兴趣的可以了解一下
    2025-04-04
  • Vue实现返回顶部按钮实例代码

    Vue实现返回顶部按钮实例代码

    这篇文章主要给大家介绍了关于Vue实现返回顶部按钮的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue3.0+vite2实现动态异步组件懒加载

    vue3.0+vite2实现动态异步组件懒加载

    学了vue写项目这么久,忽然发现路由懒加载的写法,节省了加载所有路由的时间。本文主要介绍了vue3.0+vite2实现动态异步组件懒加载,感兴趣的可以了解一下
    2021-06-06
  • vue在项目中实现base64加密解密的示例代码

    vue在项目中实现base64加密解密的示例代码

    这篇文章主要为大家详细介绍了vue在项目中实现base64加密解密的两种方法,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解一下
    2023-10-10

最新评论