20-组件案例发表评论功能

最新推荐文章于 2023-03-30 09:21:57 发布

wahaha-me

最新推荐文章于 2023-03-30 09:21:57 发布

阅读量427

点赞数

分类专栏： vue学习文章标签：组件案例评论功能

vue学习专栏收录该内容

33 篇文章 0 订阅

订阅专栏

20-组件案例发表评论功能


  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <style>
        li span{
            float: left;
        }
    </style>
</head>
<body>

<div id="app">
    <com1 @func="loadcom"></com1>
    <ul>
        <li v-for="item in list" :key="item.id">
            {{item.content1}}
            <span>评论人：{{item.user}}</span>

        </li>
    </ul>
</div>
<template id="tem1">
    <div>
        <div>
            <lable>评论人：</lable>
            <input type="text"  v-model="user">
        </div>
        <div>
            <lable>内容:</lable>
            <input type="text" v-model="content">
        </div>
        <div><button @click="postcomment">发表评论</button></div>
    </div>
</template>


<script>
    Vue.component("com1",{
      data(){
        return {
          user:"",
          content:"",
        }
      },
      template:"#tem1",
      methods:{
        postcomment(){
          var comt={id:Date.now(),user:this.user,conent:this.content}
          var list= JSON.parse(localStorage.getItem("cms") || "[]")
          list.unshift(comt)
          localStorage.setItem("cms",JSON.stringify(list))
          this.user=this.content=""
          this.$emit('func')
        }
      }
    })
    var comment = {id:Date.now,user:this.user,content:this.content}
    var vm=new Vue({
      el:"#app",
      data:{
        // uesr:"",
        // content:"",
        list:[
          {id:Date.now(),user:"李白",content1:"天生我材必有用"},
          {id:Date.now(),user:"xiao白",content1:"天生我材就有用"},
          {id:Date.now(),user:"xiaoxiao白",content1:"天生我材就用"},
        ]
      },
      created(){
        this.loadcom()
      },
      methods:{
        loadcom(){
          var list= JSON.parse(localStorage.getItem("cms") || "[]")
          this.list=list
        }
      }
    })
</script>
</body>
</html>

wahaha-me

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20-组件案例发表评论功能

20-组件案例发表评论功能 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="lib/vue.js&quo
复制链接

扫一扫