Vue組件實(shí)現(xiàn)評論區(qū)功能
更新時(shí)間：2022年04月14日 12:34:45 作者：廣東話的蛇皇
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)評論區(qū)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue組件實(shí)現(xiàn)評論區(qū)的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue組件詳解之使用slot分發(fā)內(nèi)容及Vue組件中slot的用法,需要的朋友可以參考下2018-04-04
vue中watch監(jiān)聽器的觸發(fā)時(shí)機(jī)(watch的坑及解決)
這篇文章主要介紹了vue中watch監(jiān)聽器的觸發(fā)時(shí)機(jī)(watch的坑及解決)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue.js 父向子組件傳參的實(shí)例代碼,需要的朋友可以參考下2017-10-10
vue實(shí)現(xiàn)無縫滾動(dòng)的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue非組件如何實(shí)現(xiàn)列表的無縫滾動(dòng)效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09
這篇文章主要介紹了手寫實(shí)現(xiàn)Vue計(jì)算屬性，本文從一個(gè)簡單的計(jì)算屬性例子開始，一步步實(shí)現(xiàn)了計(jì)算屬性。并且針對這個(gè)例子，詳細(xì)分析了頁面渲染時(shí)的整個(gè)代碼執(zhí)行邏輯，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了vue 虛擬DOM的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)向PDF文件中添加二維碼的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-06-06
一次用vue3簡單封裝table組件的實(shí)戰(zhàn)過程
之所以封裝全局組件是為了省事,所有的目的,全都是為了偷懶,下面這篇文章主要給大家介紹了關(guān)于用vue3簡單封裝table組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
本文主要介紹了Vue.js中el-table表格自定義列控制與拖拽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
父子組件生命周期及子組件獲取數(shù)據(jù)傳值問題剖析
這篇文章主要介紹了父子組件生命周期及子組件獲取數(shù)據(jù)問題剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10