vue中如何使用localStorage实现时间格式化

lewis 1年前 (2024-04-13) 阅读数 11 #技术

今天我们来学习关于“vue中如何使用localStorage实现时间格式化”的内容，下文有详解方法和实例，内容详细，逻辑清晰，有需要的朋友可以参考，希望大家阅读完这篇文章后能有所收获，那么下面就一起来了解一下吧。

案例数据使用localStorage持久性存储全局过滤器实现时间格式化

代码部分

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="external nofollow"  />
 </head>
 <body>
  <div id="app">
   <div class="container">
    <div class="row">
     <div class="col-md-6 offset-md-3">
      <cmt-box @func="loadComments"></cmt-box>
      <ul class="list-group">
       <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge badge-pill badge-dark float-right">评论人:{{item.user}}</span>
        <span class="float-right" style="position: relative;right: 60px;">{{ item.ctime | dateFormat() }}</span>
        {{item.content}}
       </li>
      </ul>
     </div>
    </div>
   </div>
  </div>

  <template id="tmpl">
   
   <div>
    <div class="form-group">
     <label for="comment">评论人:</label>
     <input type="text" id="comment" class="form-control" v-model="user" />
    </div>
    
    <div class="form-group">
     <label for="commentText">评论内容:</label>
     <textarea id="commentText" class="form-control" v-model="content">
    
     </textarea>
    </div>
    
    <div class="form-group">
     <input type="button" value="发表评论" class="btn btn-primary" @click="postComment" />
    </div>
   </div>
   
  </template>


  <script type="text/javascript">
   
   // 全局过滤器 时间格式化
   // 所谓的全局过滤器，就是所有的VM实例都共享的
   Vue.filter('dateFormat',function(dateStr,pattern=""){
     // 根据给定的时间字符串，得到特定的时间
    
    var dt = new Date(dateStr)
    
    //  yyyy-mm-dd
    var year = dt.getFullYear()
    
    var month = (dt.getMonth() + 1).toString().padStart(2,'0')
    
    var day = dt.getDate().toString().padStart(2,'0')
    
    // return `${year}-${month}-${day}`
    
    if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
     return `${year}-${month}-${day}`
    }else{
     var hh = dt.getHours().toString().padStart(2,'0')
     
     var mm = dt.getMinutes().toString().padStart(2,'0')
     
     var ss = dt.getSeconds().toString().padStart(2,'0')
     
     return `${year}-${month}-${day} ${hh}:${mm}:${ss}`
     
    }
    
   })
   
   var commentBox = {
    data() {
     return {
      user: '',
      content: '',
      ctime:new Date()
     }
    },
    template: '#tmpl',
    methods: {
     postComment() {
      // localStorage 只支持存放字符串数据， 要先调用 JSON.stringify
      // 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个 数组对象， 然后，把最新的评论， push 到这个数组
      // 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则 可以 返回一个 '[]' 让 JSON.parse 去转换
      // 把 最新的 评论列表数组，再次调用 JSON.stringify 转为 数组字符串，然后调用 localStorage.setItem()

      var comment = {
       id: Date.now(),
       user: this.user,
       content: this.content,
       ctime:this.ctime
      }
      
      // 从 localStorage 中获取所有的评论
      var list = JSON.parse(localStorage.getItem('cmts') || '[]')

      list.unshift(comment)

      // 重新保存最新的 评论数据
      localStorage.setItem('cmts', JSON.stringify(list))

      this.user = this.content = ''

      this.$emit('func')

     }
    }
   }

   var vm = new Vue({
    el: '#app',
    data: {
     list: []
    },
    methods: {
     loadComments() {
      // 从本地的 localStorage 中，加载评论列表
      var list = JSON.parse(localStorage.getItem('cmts') || '[]')

      this.list = list

     }
    },
    components: {
     'cmt-box': commentBox
    },
    created() {
     this.loadComments()
    }
   })
  </script>

 </body>
</html>

效果图

到此这篇关于“vue中如何使用localStorage实现时间格式化”的文章就介绍到这了,更多相关vue中如何使用localStorage实现时间格式化内容，欢迎关注博信技术资讯频道，小编将为大家输出更多高质量的实用文章！

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：在PL/SQL中，可以使用DBMS_OUTPUT包来导出查询结果。首先，需要在PL/SQL程序中使用DBMS_OUTPUT.PUT_LINE函数将结果输出到输出缓冲区。例如，以下是一个简单的PL/SQL程序，将查询结果输出到输出缓冲区下一篇：使用C++的文件流对象和相关的函数可以清空文件内容

vue中如何使用localStorage实现时间格式化

版权声明

作者文章