当前位置:Gxlcms > JavaScript > 详解vue过滤器在v2.0版本用法

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

时间:2021-07-01 10:21:17 帮助过:23人阅读

1.x写法

  1. <body>
  2. <div id="app">
  3. {{html|uppercase}}
  4. </div>
  5. <script>
  6. new Vue({
  7. el:'#app',
  8. data:{
  9. msg:"123",
  10. html:"abc"
  11. }
  12. })
  13. </script>
  14. </body>

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

  1. <div id="app">
  2. {{message|uppercase}}
  3. </div>
  4. //过滤器
  5. Vue.filter('uppercase', function(value) {
  6. if (!value) { return ''}
  7. value = value.toString()
  8. return value.charAt(0).toUpperCase() + value.slice(1)
  9. })
  10. var vm = new Vue({
  11. el:'#app',
  12. data: {
  13. message: 'test'
  14. }
  15. })

Vue.filter( id, [definition] )

参数:

{string} id
{Function} [definition]

用法:

注册或获取全局过滤器。

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

官方文档参考:

http://cn.vuejs.org/v2/api/#filters

http://cn.vuejs.org/v2/api/

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

人气教程排行