How to implement comment list in vue

Today, I would like to share with you how vue realizes the relevant knowledge of the comment list. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Case data is formatted in time using localStorage persistent storage global filters

Code part

Commentator: {{item.user}} {{item.ctime | dateFormat ()}} {{item.content}} Commentator: comment content: / / Global filter time formatting / / so-called global filter Vue.filter ('dateFormat',function (dateStr,pattern= ") {/ / based on a given time string shared by all VM instances Get a specific time 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) 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 only supports storing string data To first call JSON.stringify / / before saving the latest comment data, first get the previous comment data (string) from localStorage, convert it into an array object, and then push the latest comments to this array / / if the comment string in the obtained localStorage is empty You can return a'[] 'and ask JSON.parse to convert / / convert the array of the latest comments list, and then call JSON.stringify to convert the array string again Then call localStorage.setItem () var comment = {id: Date.now (), user: this.user, content: this.content Ctime:this.ctime} / / get all comments from localStorage var list = JSON.parse (localStorage.getItem ('cmts') | |' []') list.unshift (comment) / / resave the latest comment data localStorage.setItem ('cmts' JSON.stringify (list)) this.user = this.content =''this.$emit (' func')} var vm = new Vue ({el:'# app' Data: {list: []}, methods: {loadComments () {/ / from the local localStorage Load comment list var list = JSON.parse (localStorage.getItem ('cmts') | |' []') this.list = list}}, components: {'cmt-box': commentBox} Created () {this.loadComments ()}})

Effect picture

These are all the contents of the article "how to implement the comment list in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.