vue怎么实现发表评论功能

2023-06-30 03:14

短信预约 -IT技能 免费直播动态提醒

今天小编给大家分享一下vue怎么实现发表评论功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

具体代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <link rel="stylesheet" href="bootstrap-3.3.7.css" rel="external nofollow" />        <title></title>    </head>    <script class="lazy" data-src="vue-2.4.0.js"></script>    <body>    <div id="app">        <ctm @func="show"></ctm>        <ul class="list-group">            <li class="list-group-item" v-for="item in list" :key="item.id">                <span class="badge">评论人{{item.user}}</span>                {{item.content}}            </li>        </ul>     </div>     <template id="tmp1">         <div>             <div class="form-group">                <label>评论人：</label>                <input type="text" class="form-control" v-model="user"/>             </div>             <div class="form-group">                             <label>评论内容：</label>                             <textarea class="form-control" v-model="content"></textarea>             </div>             <div class="form-group">                 <input type="button" class="btn-primary" value="发表评论" @click="postComment"/>             </div>         </div>     </template>     <script>            var com={                template:'#tmp1',                data(){                    return{                        user:'',                        content:''                    }                },                methods:{                    postComment(){                        //得到的先摆出来                        var comments={id:Date.now(),user:this.user,content:this.content}                        //获取之前列表所有的内容,由字符串形式转换成对象形式                        var list=JSON.parse(localStorage.getItem('cmt')||'[]')                        //往list列表里面追加                        list.unshift(comments)                        //然后存到localStorage里面去,转化为字符串形式                        localStorage.setItem('cmt',JSON.stringify(list))                        this.user=this.content=''                        this.$emit('func')                    }                }            }               // 创建 Vue 实例，得到 ViewModel               var vm = new Vue({                 el: '#app',                 data: {                     list:[                        {id:Date.now(),user:'小小',content:'天生我材必有用'},                        {id:Date.now(),user:'小小1',content:'天生我材'},                    ]                     },                //使用生命周期函数,created函数已经把data和methods创建好了,必须用this                //需要自动刷新,所以要用到父组件为子组件传递方法                created(){                    this.show()                },                methods: {                    show(){                        //显示,先获取localStorage的内容,转为对象                        var list=JSON.parse(localStorage.getItem('cmt')||'[]')                        this.list=list                    }                    },                components:{                    'ctm':com                }                })    </script>    </body></html>

效果图

vue怎么实现发表评论功能