快捷導(dǎo)航

vue實現(xiàn)發(fā)表評論功能

更新時間：2022年04月14日 16:57:46 作者：Seven_drunk

這篇文章主要為大家詳細介紹了vue實現(xiàn)發(fā)表評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)發(fā)表評論的具體代碼，供大家參考，具體內(nèi)容如下

<!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>評論內(nèi)容：</label>
?? ??? ??? ? ?? ??? ??? ??? ?<textarea class="form-control" v-model="content"></textarea>
?? ??? ??? ? </div>
?? ??? ??? ? <div class="form-group">
?? ??? ??? ? ?? ?<input type="button" class="btn-primary" value="發(fā)表評論" @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}
?? ??? ??? ??? ??? ??? ?//獲取之前列表所有的內(nèi)容,由字符串形式轉(zhuǎn)換成對象形式
?? ??? ??? ??? ??? ??? ?var list=JSON.parse(localStorage.getItem('cmt')||'[]')
?? ??? ??? ??? ??? ??? ?//往list列表里面追加
?? ??? ??? ??? ??? ??? ?list.unshift(comments)
?? ??? ??? ??? ??? ??? ?//然后存到localStorage里面去,轉(zhuǎn)化為字符串形式
?? ??? ??? ??? ??? ??? ?localStorage.setItem('cmt',JSON.stringify(list))
?? ??? ??? ??? ??? ??? ?this.user=this.content=''
?? ??? ??? ??? ??? ??? ?this.$emit('func')
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ? ?? ??? ? ?// 創(chuàng)建 Vue 實例，得到 ViewModel
?? ? ?? ??? ? ?var vm = new Vue({
?? ? ?? ??? ? ? ?el: '#app',
?? ? ?? ??? ? ? ?data: {
?? ? ?? ??? ??? ??? ?list:[
?? ??? ??? ??? ??? ??? ?{id:Date.now(),user:'小小',content:'天生我材必有用'},
?? ??? ??? ??? ??? ??? ?{id:Date.now(),user:'小小1',content:'天生我材'},
?? ??? ??? ??? ??? ?]?? ?
?? ? ?? ??? ??? ?},
?? ??? ??? ??? ?//使用生命周期函數(shù),created函數(shù)已經(jīng)把data和methods創(chuàng)建好了,必須用this
?? ??? ??? ??? ?//需要自動刷新,所以要用到父組件為子組件傳遞方法
?? ??? ??? ??? ?created(){
?? ??? ??? ??? ??? ?this.show()
?? ??? ??? ??? ?},
?? ??? ??? ??? ?methods: {
?? ??? ??? ??? ??? ?show(){
?? ??? ??? ??? ??? ??? ?//顯示,先獲取localStorage的內(nèi)容,轉(zhuǎn)為對象
?? ??? ??? ??? ??? ??? ?var list=JSON.parse(localStorage.getItem('cmt')||'[]')
?? ??? ??? ??? ??? ??? ?this.list=list
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ?components:{
?? ??? ??? ??? ??? ?'ctm':com
?? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ?</script>
?? ?</body>
</html>

效果圖