Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.