vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue发表评论功能

vue实现发表评论功能

作者:Seven_drunk

这篇文章主要为大家详细介绍了vue实现发表评论功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现发表评论的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="bootstrap-3.3.7.css" />
        <title></title>
    </head>
    <script 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>

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文