快捷導(dǎo)航

vue開(kāi)發(fā)實(shí)現(xiàn)評(píng)論列表

更新時(shí)間：2022年04月14日 17:02:15 作者：qq_35758831

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

本文實(shí)例為大家分享了vue開(kāi)發(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">暫無(wú)評(píng)論，點(diǎn)擊左側(cè)添加評(píng)論?。。?lt;/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>說(shuō)：</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)