Vue組件實現(xiàn)評論區(qū)功能

更新時間：2022年04月14日 12:34:45 作者：廣東話的蛇皇

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

本文實例為大家分享了Vue組件實現(xiàn)評論區(qū)的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
?? ?<meta charset="utf-8">
?? ?<meta name="viewport" content="width=device-width, inital-scale=1.0">
?? ?<meta http-equiv="X-UA-Compatible" content="ie=edge">
?? ?<title>評論</title>
?? ?<script src="vue.js"></script>
?? ?<link rel="stylesheet" ?href="bootstrap.min.css" >
</head>
<body>
?? ?<div id="app">
?? ??? ?<cmt-box @func="loadComments"></cmt-box>
?? ??? ?<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="tmpl">
?? ??? ?<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" value="發(fā)表評論" class="btn btn-primary" @click="postComments">
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</template>
?? ?<script>
?? ??? ?var commentBox = {
?? ??? ??? ?template: '#tmpl',
?? ??? ??? ?data() {
?? ??? ??? ??? ?return {
?? ??? ??? ??? ??? ?user: '',
?? ??? ??? ??? ??? ?content: ''?? ?
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?methods: {
?? ??? ??? ??? ?postComments() {
?? ??? ??? ??? ??? ?var comment = {id: Date.now(), user:this.user, content:this.content }
?? ??? ??? ??? ??? ?var list = JSON.parse(localStorage.getItem('cmts') || '[]')
?? ??? ??? ??? ??? ?list.unshift(comment)
?? ??? ??? ??? ??? ?localStorage.setItem('cmts',JSON.stringify(list))
?? ??? ??? ??? ??? ?this.user = this.content = ''
?? ??? ??? ??? ??? ?this.$emit('func')

?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ??? ?var vm = new Vue({
?? ??? ??? ?el: '#app',
?? ??? ??? ?data: {
?? ??? ??? ??? ?list:[
?? ??? ??? ??? ??? ?{ time: Date.now(), user: '路人甲', content: '武漢加油' },
?? ??? ??? ??? ??? ?{ time: Date.now(), user: '炮灰乙', content: '中國加油' },
?? ??? ??? ??? ??? ?{ time: Date.now(), user: '小兵丙', content: '廣東加油' },
?? ??? ??? ??? ??? ?{ time: Date.now(), user: '土匪丁', content: '全球加油' }
?? ??? ??? ??? ?]
?? ??? ??? ?},
?? ??? ??? ?created(){
?? ??? ??? ??? ?this.loadComments()
?? ??? ??? ?},
?? ??? ??? ?methods: {
?? ??? ??? ??? ?loadComments(){
?? ??? ??? ??? ??? ?var list = JSON.parse(localStorage.getItem('cmts') || '[]')
?? ??? ??? ??? ??? ?this.list = list
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?components: {
?? ??? ??? ??? ?'cmt-box': commentBox
?? ??? ??? ?}
?? ??? ?});
?? ?</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: