vue開發(fā)實(shí)現(xiàn)評(píng)論列表
本文實(shí)例為大家分享了vue開發(fā)實(shí)現(xiàn)評(píng)論列表的具體代碼,供大家參考,具體內(nèi)容如下
index.html
<!DOCTYPE html> <html> ? <head> ? ? <meta charset="utf-8"> ? ? <meta name="viewport" content="width=device-width,initial-scale=1.0"> ?? ?<link rel="stylesheet" href="./static/css/bootstrap.css"> ? ? <title>y</title> ? </head> ? <body> ? ? <div id="app"></div> ? ? <!-- built files will be auto injected --> ? </body> </html>
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ ? el: '#app', ? components: { App }, ? template: '<App/>', })
App.vue
<template> ? <div id="app"> ? ? <header class="site-header jumbotron"> ? ? ? <div class="container"> ? ? ? ? <div class="row"> ? ? ? ? ? <div class="col-xs-12"> ? ? ? ? ? ? <h1>請(qǐng)發(fā)表對(duì)vue的評(píng)論</h1> ? ? ? ? ? </div> ? ? ? ? </div> ? ? ? </div> ? ? </header> ? ? <div class="container"> ? ? ? <Add :addComment="addComment"/> ? ? ? <List :comments="comments" :deleteComment="deleteComment"/> ? ? </div> ? </div> </template> <script> ? import Add from './components/Add.vue' ? import List from './components/List.vue' ? export default { ? ? data() { ? ? ? return { ?//數(shù)據(jù)在哪個(gè)組件,更新數(shù)據(jù)的行為就在哪個(gè)組件 ? ? ? ? comments: [{ ? ? ? ? ? ? name: 'BoB', ? ? ? ? ? ? content: 'Vue還不錯(cuò)' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? name: 'Cat', ? ? ? ? ? ? content: 'Vue so easy' ? ? ? ? ? }, ? ? ? ? ? { ? ? ? ? ? ? name: 'Xhong', ? ? ? ? ? ? content: 'Vue so so' ? ? ? ? ? } ? ? ? ? ] ? ? ? } ? ? }, ? ? methods: { ? ? ? //添加評(píng)論 ? ? ? addComment(comment){ ? ? ? ? this.comments.unshift(comment) ? ? ? }, ? ? ? //刪除指定的評(píng)論 ? ? ? deleteComment(index){ ? ? ? ? this.comments.splice(index,1) ? ? ? } ? ? }, ? ? components: { ? ? ? Add, ? ? ? List ? ? } ? } </script> <style> </style>
Add.vue
<template> ? <div class="col-md-4"> ? ? <form class="form-horizontal"> ? ? ? <div class="form-group"> ? ? ? ? <lable>用戶名</lable> ? ? ? ? <input type="text" class="form-control" placeholder="用戶名" v-model="name"> ? ? ? </div> ? ? ? <div class="form-group"> ? ? ? ? <lable>評(píng)論內(nèi)容</lable> ? ? ? ? <textarea class="form-control" cols="30" rows="6" placeholder="評(píng)論內(nèi)容" v-model="content"></textarea> ? ? ? </div> ? ? ? <div class="form-group"> ? ? ? ? <div class="col-sm-offset-2 col-sm-10"> ? ? ? ? ? <button type="button" class="btn btn-default pull-right" @click="add">提交</button> ? ? ? ? </div> ? ? ? </div> ? ? </form> ? </div> </template> <script> ? export default { ? ? props: { ? ? ? addComment: { ? ? ? ? type:Function, ? ? ? ? required:true ? ? ? } ? ? }, ? ? data() { ? ? ? return { ? ? ? ? name: '', ? ? ? ? content: '' ? ? ? } ? ? }, ? ? methods: { ? ? ? add() { ? ? ? ? ? //檢查輸入的合法性 ? ? ? ? ? const name=this.name.trim(); ? ? ? ? ? const content=this.content.trim(); ? ? ? ? ? if(!name || !content){ ? ? ? ? ? ? alert('姓名或內(nèi)容不能為空') ? ? ? ? ? ? return ? ? ? ? ? } ? ? ? ? ?//根據(jù)輸入的數(shù)據(jù)封裝成一個(gè)對(duì)象 ? ? ? ? ? const comment = { ? ? ? ? ? ? name, ? ? ? ? ? ? content ? ? ? ? ? } ? ? ? ? ? //添加到comments中 ? ? ? ? ? this.addComment(comment) ? ? ? ? ? //清除數(shù)據(jù) ? ? ? ? ? this.name = '' ? ? ? ? ? this.content = '' ? ? ? } ? ? } ? } </script> <style> </style>
List.vue
<template> ? <div class="col-md-8"> ? ? <h3 class="reply">評(píng)論回復(fù):</h3> ? ? <h2 v-show="comments.length===0">暫無評(píng)論,點(diǎn)擊左側(cè)添加評(píng)論?。?!</h2> ? ? <ul class="list-group"> ? ? ? <Item v-for="(comment, index) in comments" :key="index" :comment="comment" :deleteComment="deleteComment" :index="index"/> ? ? </ul> ? </div> </template> <script> ? import Item from './Item.vue' ? export default { ? ? //聲明接受屬性,這個(gè)屬性就會(huì)成為組件對(duì)象的屬性 ? ? props:['comments','deleteComment'], ? ? components:{ ? ? ? Item ? ? } ? } </script> <style> ? .reply { ? ? margin-top: 0px; ? } </style>
Item.vue
<template> ? <li class="list-group-item"> ? ? <div class="handle"> ? ? ? <a href="javascript:;" @click="deleteItem">刪除</a> ? ? </div> ? ? <p class="user"><span>{{comment.name}}</span><span>說:</span></p> ? ? <p class="centence">{{comment.content}}</p> ? </li> </template> <script> ? export default { ? ? props: { //指定屬性名和屬性值得類型 ? ? ? comment: Object, ? ? ? deleteComment: Function, ? ? ? index: Number ? ? }, ? ? methods: { ? ? ? deleteItem() { ? ? ? ? const {comment,deleteComment,index}=this ? ? ? ? if(window.confirm(`確定刪除${comment.name}的評(píng)論嗎?`)){ ? ? ? ? ? deleteComment(index) ? ? ? ? } ? ? ? } ? ? } ? } </script> <style> ? li { ? ? transition: .5s; ? ? overflow: hidden; ? } ? .handle { ? ? width: 40px; ? ? border: 1px solid #CCCCCC; ? ? background: #FFFFFF; ? ? position: absolute; ? ? right: 10px; ? ? top: 1px; ? ? text-align: center; ? } ? .handle a { ? ? display: block; ? ? text-decoration: none; ? } ? .list-group-item .centence { ? ? padding: 0px 50px; ? } ? .user { ? ? font-size: 22px; ? } </style>
目錄結(jié)構(gòu)
最終效果
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue實(shí)現(xiàn)發(fā)表評(píng)論功能
- vue實(shí)現(xiàn)文章評(píng)論和回復(fù)列表
- VUE+Java實(shí)現(xiàn)評(píng)論回復(fù)功能
- Vue組件實(shí)現(xiàn)評(píng)論區(qū)功能
- vue實(shí)現(xiàn)評(píng)論列表
- Vue實(shí)現(xiàn)簡(jiǎn)單的發(fā)表評(píng)論功能
- vue實(shí)現(xiàn)評(píng)論列表功能
- Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)
- Vue.js實(shí)現(xiàn)文章評(píng)論和回復(fù)評(píng)論功能
- vue組件實(shí)現(xiàn)發(fā)表評(píng)論功能
相關(guān)文章
詳解Vue開發(fā)網(wǎng)站seo優(yōu)化方法
這篇文章主要介紹了Vue開發(fā)網(wǎng)站seo優(yōu)化方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05vue router 跳轉(zhuǎn)后回到頂部的實(shí)例
今天小編就為大家分享一篇vue router 跳轉(zhuǎn)后回到頂部的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue3如何使用provide實(shí)現(xiàn)狀態(tài)管理詳解
Vue3中有一對(duì)新增的api,provide和inject,熟悉Vue2的朋友應(yīng)該明,這篇文章主要給大家介紹了關(guān)于vue3如何使用provide實(shí)現(xiàn)狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2021-10-10vue3 學(xué)習(xí)筆記之a(chǎn)xios的使用變化總結(jié)
本篇文章主要旨在幫助正在學(xué)vue3或者準(zhǔn)備學(xué)vue3的同學(xué)了解網(wǎng)絡(luò)請(qǐng)求axios該如何使用,防止接觸了一點(diǎn)點(diǎn)vue3的同學(xué)會(huì)有個(gè)疑問。有興趣的小伙伴可以關(guān)注一下2021-11-11一次Vue中computed沒有觸發(fā)的原因以及排查經(jīng)歷
這篇文章主要介紹了一次Vue中computed沒有觸發(fā)的原因以及排查經(jīng)歷,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11