vue ajax 自动刷新,2020-11-14 vue.js 留言板自动刷新列表

html>

Document

*,ul{

margin: 0;

box-sizing: border-box;

}

ul{

display: table;

width: 100%;

padding-left: 0px ;

}

li{

list-style-type: none;

border-bottom: darkgrey 1px solid;

padding:  5px 10px ;

height: 31px;

}

span{

border-radius: 25px;

background-color: grey;

color: lavenderblush;

font-size: 5px;

padding: 3px;

}

span{float: right;}

  

•   

• 评论人：{{item.user}}

  {{item.content}}

   

评论人：

评论内容：

// 定义一个子组件，commentBox 为名称 后面的{}对象为模板配置

var commentBox = {

template: '#tmpl',//子组件模板 ID 指示

data(){ //子组件的data是一个函数，return 回一个{对象}

return {

user: '',//子组件里的变量要到子组件中定义

content: ''

}

},

methods: {

postComment(){ //发表评论

//分析:发表评论的业务逻辑

//1.评论数据哪去了？存放到 localStorage 本地存储中

//2.先输出一个最新的评论对象

//3.目的：把最新的评论对象存到 localStorage 中 步骤：

// 3.1调用 localStorage.getItem() 获取之前的数据(string)=>

//    再用 JSON.parse() 方法将获取到的字符串数据 转换为：数组{对象}

// 3.2将最新评论 {对象} push 到3.2中的数组对象，再用 localStorage.setItem()方法将最

// 新数据保存到 localStorage 中---数据打包完毕

var comment = { id: Date.now(), user: this.user, content: this.content }

var listd = JSON.parse(localStorage.getItem('cmtss') ||'[]')

listd.unshift(comment)

localStorage.setItem('cmtss',JSON.stringify(listd))

this.user = this.content = ""

this.$emit('func')

}

},

}

var vm=new Vue({

el:'#app',

data:{

list: [

{ id: Date.now(), user: '李白', content: '天生我材必有用' },

{ id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },

{ id: Date.now(), user: "小马", content: "马化腾的马" }

]

},

created(){

this.loadComments()

},

methods:{

loadComments() {

//    从本地的 localStorage 中，加载评论列表

var list = JSON.parse(localStorage.getItem('cmtss') || '[]')

this.list = list

}

},

components: {

'cmt-box': commentBox

}

});