vue实现评论列表

实现功能：发表评论、本地存储、显示列表

  • 页面加载，从本地localStorage中获得数据
  • 子组件中，获取原数据，添加新数据，加入到localStorage
  • 点击发表评论时，调用第二步定义的方法，重新加载数据
  1. 借助bootstrap页面布局，包含评论人、评论内容、提交按钮以及评论列表
  2. 定义子组件，子组件包含了评论人、评论内容、提交按钮
  3. 页面加载：
    1. methods定义方法：获得localStorage中的数据，转为数组对象，置为父组件中data定义的list，借助v-for循环输出
      2. 需要思考该方法何时调用，在那里调用（生命周期函数）
  4. 当点击提交按钮时，
    1.先从localStorage中获取数据localStorage.getItem('')
    2.localStorage 只支持存放字符串数据，所以我们需要调用JSON.parse将字符串转为数组对象，这里就需要注意，localStorage列表可能为空或者不存在，那我们就需要转为一个空数组，而不是null，所以我们可以返回一个[]
    3.将input框内的数据保存为一个对象，添加至获得的数组对象中，需注意，评论列表最新评论置于最上处，所以添加方法为unshift
    3.之后我们需要将最新的数组对象存入localStorage中，但是 localStorage 只支持存放字符串数据，所以，调用JSON.stringify将数组对象转为字符串数据，调用localStorage.setItem保存至localStorage，最后将input框置为空
    4.子组件绑定父组件方法this.$emit，当点击评论时，页面重新加载数据，调用父组件定义的方法
<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link  href="./bootstrap.min.css">     <script src="./vue.js"></script> </head>  <body>     <div id="app">         <addc @fn='renderList'></addc>         <ul class="list-group">             <li class="list-group-item" v-for="(item, index) in list" :key="index">{{item.ucom}}                 <span class="badge">{{item.uname}}</span>             </li>         </ul>     </div>     <script id="tmp" type="text/x-template">       <div class="form-inline">         <div class="form-group">             <label>评论人：</label>             <input type="text" class="form-control" id="" v-model="user">         </div>         <div class="form-group">             <label>评论内容：</label>             <textarea type="text" class="form-control" id="" v-model="ucoms"></textarea>         </div>         <button type="submit" class="btn btn-primary" @click='add'>发表评论</button>         </div>     </script>     <script>         let comp = {             template: '#tmp',             data() {                 return {                     user: '',                     ucoms: ''                 }             },             methods: {                 add() {                     let cons = { id: new Date(), uname: this.user, ucom: this.ucoms }                     let list = JSON.parse(localStorage.getItem('cusm') || '[]')//把列表转化成数组对象                     list.unshift(cons)//追加到数组对象                     //转化成新的字符串，放到localStorage里面                     localStorage.setItem('cusm', JSON.stringify(list))                     this.user = this.ucoms = ''//文本框清空                     this.$emit("fn")                 }             },         }         new Vue({             el: '#app',             data: {                 // list: [                 //     { id: new Date(), uname: '张世超', ucom: '帅吗？' }                 // ]                 list: ''             },             methods: {                 renderList() {                     let nMsg = localStorage.getItem('cusm')                     this.list = JSON.parse(nMsg)                 },             },             components: {                 // 注册组件                 "addc": comp             },             created() {                 this.renderList()             },          })     </script> </body>  </html>

上一个：叫猫过来的手势野猫（叫猫过来的手势野猫会叫吗）

下一个：为什么猫不用打狂犬疫苗了（为什么猫不打疫苗不能洗澡）

热门文章

归纳