vue filters的使用详解

 更新时间:2018年06月11日 09:50:42   作者:今天天气很好嗯  
使用 filters 实现英文字母转大写,实现代码超简单,本文重点给大家介绍vue filters的使用,感兴趣的朋友一起看看吧

使用 filters  实现   英文字母 转大写

1、template   :

<div class="page">
{{msg | upperCase}}
</div>

2、script

data () {
     return {
             msg: 'weather is ok ',
      }
},
filters : {
   upperCase : function(val){
     return val.toString().toUpperCase();
   }
 }

3、输出结果

{{msg | upperCase}}

总结

以上所述是小编给大家介绍的vue filters的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • element el-table表格的二次封装实现(附表格高度自适应)

    element el-table表格的二次封装实现(附表格高度自适应)

    这篇文章主要介绍了element el-table表格的二次封装实现(附表格高度自适应),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue打包terser压缩去除控制台打印和断点过程

    vue打包terser压缩去除控制台打印和断点过程

    这篇文章主要介绍了vue打包terser压缩去除控制台打印和断点过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue内联处理器中访问方法和访问事件参数详解

    Vue内联处理器中访问方法和访问事件参数详解

    在 Vue 3 中,使用组合式 API 时,可以通过内联事件处理器来直接在模板中编写事件处理逻辑,内联事件处理器不仅可以直接执行简单的操作,还可以调用组件中的方法,并访问事件参数,下面将详细讲解如何在内联事件处理器中调用方法以及访问事件参数,需要的朋友可以参考下
    2024-12-12
  • vue+ElementUi+iframe实现轮播不同的网站

    vue+ElementUi+iframe实现轮播不同的网站

    需要实现一个轮播图,轮播内容是不同的网站,并实现鼠标滑动时停止轮播,当鼠标10秒内不动时继续轮播,所以本文给大家介绍了用vue+ElementUi+iframe实现轮播不同的网站,需要的朋友可以参考下
    2024-02-02
  • vue3+ts深入组件Props实例详解

    vue3+ts深入组件Props实例详解

    Props是组件之间进行数据传递的一种方式,可以将数据从父组件传递给子组件,这篇文章主要介绍了vue3+ts深入组件Props的实例详解,需要的朋友可以参考下
    2023-09-09
  • vue+echarts实现进度条式柱状图

    vue+echarts实现进度条式柱状图

    这篇文章主要为大家详细介绍了vue+echarts实现进度条式柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 在Vue3中实现动态路由的示例代码

    在Vue3中实现动态路由的示例代码

    Vue3中的动态路由是一种高级功能,它允许你在URL中包含变量,这些变量可以在组件内部通过$route.params对象访问,动态路由通常用于构建可配置性强、更具灵活性的应用,本文详细介绍了如何在vue3中实现动态路由,需要的朋友可以参考下
    2024-07-07
  • 关于el-scrollbar滚动条初始化不显示的问题及解决

    关于el-scrollbar滚动条初始化不显示的问题及解决

    这篇文章主要介绍了关于el-scrollbar滚动条初始化不显示的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 通过vue-cli来学习修改Webpack多环境配置和发布问题

    通过vue-cli来学习修改Webpack多环境配置和发布问题

    这篇文章主要介绍了随着Vue-cli来'学'并'改'Webpack之多环境配置和发布的相关知识,本文将会根据一些实际的业务需求,先学习vue-cli生成的模版,然后在进行相关修改,感兴趣的朋友一起跟着小编学习吧
    2017-12-12
  • 如何利用vue+vue-router+elementUI实现简易通讯录

    如何利用vue+vue-router+elementUI实现简易通讯录

    这篇文章主要介绍了如何利用vue+vue-router+elementUI实现简易通讯录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05

最新评论