vue第6天：过滤器的使用、处理日期格式以及参数问题。Vue的异步dom更新、Vue响应式数据的说明、响应式数据的说明、组件化开发、组件通讯：父传子，子传父，非父子

最新推荐文章于 2022-03-19 11:29:11 发布

库库好困

最新推荐文章于 2022-03-19 11:29:11 发布

阅读量277

点赞数

分类专栏：十：VUE 文章标签： vue

本文链接：https://blog.csdn.net/m0_46597922/article/details/107622836

版权

过滤器过滤器的基本使用vue提供了过滤器的语法, 可以用于格式化文本 (日期)、封装对于字符串操作的过程基本使用 => 让英文转大写定义过滤器Vue.filter(过滤器名字, 处理字符串的函数)这个函数的返回值, 就是处理完成的结果函数的第一个参数，就是需要操作的字符串使用过滤器 {{ msg | 过滤器名字 }}代码演示： <body> <div id="app"> <h1>{{ msg | up

摘要由CSDN通过智能技术生成

过滤器

过滤器的基本使用

vue提供了过滤器的语法, 可以用于格式化文本 (日期)、封装对于字符串操作的过程

基本使用 => 让英文转大写

定义过滤器
```
Vue.filter(过滤器名字, 处理字符串的函数)
```
- 这个函数的返回值, 就是处理完成的结果
- 函数的第一个参数，就是需要操作的字符串
使用过滤器

{ { msg | 过滤器名字 }}

代码演示：

  <body>
    <div id="app">
      <h1>{
  { msg | upper }}</h1>
      <h1>{
  { msg2 | upper }}</h1>
    </div>

    <script src="./vue.js"></script>
    <script>
      // 开发过程中, 经常需要对字符串进行操作, 有一些字符串的操作是相同的, 我们可以考虑封装这些相同的操作
      // vue中, 有一个过滤器, 可以专门封装对于字符串的操作过程
      // 语法:
      // 1. 定义过滤器
      // Vue.filter('过滤器的名字', '处理字符串的函数')
      // (1) 函数的返回值, 就是处理的结果
      // (2) 函数的第一个参数, 就是需要操作的字符串

      // 2. 使用过滤器
      // {
    { msg | 过滤器的名字 }}
      // 表示: 这个msg, 将被这个过滤器处理

      Vue.filter('upper', function(value) {
    
        return value.toUpperCase()
      })

      const vm = new Vue({
    
        el: '#app',
        data: {
    
          msg: 'hello vue',
          msg2: 'shuai peng'
        }
      })
    </script>
  </body>

过滤器 - 处理日期格式

一般后台会返回的是一个时间戳, 每次都要处理很麻烦

跟你一个时间戳，要什么格式自己处理

npm i moment

代码演示：

  <body>
    <div id="app">
      <h1>{
  { date1 | time }}</h1>
      <h1>{
  { date2 | time }}</h1>
    </div>

    <script src="./node_modules/moment/moment.js"></script>
    <script src="./vue.js"></script>
    <script>
      // 对于日期的处理, 将来后台很可能会返回一个日期时间戳
      // 跟你一个时间戳, 你要什么格式, 自己处理

      Vue.filter('time', function(value) {
    
        return moment(value).format('YYYY年MM月DD日 HH:mm:ss')
      })

      const vm = new Vue({
    
        el: '#app',
        data: {
    
          date1: 1595832673946,
          date2: 1815832673946
        }
      })
    </script>
  </body>

过滤器 - 参数的问题

使用时，支持传参

{
   {
    msg | time1 }} 正常使用
{
   {
    msg | time1(额外传递的参数1, 额外的参数2, ...) }} 正常使用

注意：过滤器第一个参数，永远都是要操作的字符串，后面才是传递的额外的参数

代码演示：

  <body>
    <div id="app">
      <h1>{
  { date1 | time('YYYY年MM月DD日') }}</h1>
      <h1>{
  { date2 | time('YYYY/MM/DD') }}</h1>
      <h1>{
  { date3 | time }}</h1>
    </div>

    <script src="./node_modules/moment/moment.js"></script>
    <script src="./vue.js"></script>
    <script>
      // 对于日期的处理, 将来后台很可能会返回一个日期时间戳
      // 跟你一个时间戳, 你要什么格式, 自己处理

      // 过滤器的参数: 过滤器使用时, 支持传参的
      // {
    { msg | time1 }} 正常使用
      // {
    { msg | time1(额外传递的参数1, 额外传递的参数2, ....) }} 

      // 注意: 过滤器第一个参数, 永远是要操作的字符串, 后面才是传递的额外的参数(如果有)
      Vue.filter('time', function(value, str="YYYY年MM月DD日 HH:mm:ss") {
    
        return moment(value).format(str)
      })

      const vm = new Vue({
    
        el: '#app',
        data: {
    
          date1: 1595832673946, // xxxx年xx月xx日 xx:xx:xx
          date2: 1815832673946,  // xxxx/xx/xx xx:xx:xx
          date3: 2215832673946  
        }
      })
    </script>
  </body>

全局和局部过滤器（暂时了解）

先学习语法，到后面项目才会详讲

**全局过滤器：**在任何的Vue实例中，都可以使用（后面我们会学习组件，每个组件其实都是一个Vue实例）

局部过滤器： 只能在当前Vue实例中使用 （在组件中第一的过滤器，只能在当前的组件使用）

代码演示：

  <body>
    <div id="app">
      <h1>{
  { msg | global | demo  }}</h1>
    </div>

    <div id="app2">
      <h1

最低0.47元/天解锁文章

库库好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue第6天：过滤器的使用、处理日期格式以及参数问题。Vue的异步dom更新、Vue响应式数据的说明、响应式数据的说明、组件化开发、组件通讯：父传子，子传父，非父子

过滤器过滤器的基本使用vue提供了过滤器的语法, 可以用于格式化文本 (日期)、封装对于字符串操作的过程基本使用 => 让英文转大写定义过滤器Vue.filter(过滤器名字, 处理字符串的函数)这个函数的返回值, 就是处理完成的结果函数的第一个参数，就是需要操作的字符串使用过滤器 {{ msg | 过滤器名字 }}代码演示： <body> <div id="app"> <h1>{{ msg | up
复制链接

扫一扫