欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年04月14日 17:02:15   作者:qq_35758831  
這篇文章主要為大家詳細(xì)介紹了vue開發(fā)實(shí)現(xiàn)評(píng)論列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解Vue開發(fā)網(wǎng)站seo優(yōu)化方法

    詳解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-05
  • vue slot與傳參實(shí)例代碼講解

    vue slot與傳參實(shí)例代碼講解

    這篇文章主要介紹了vue slot與傳參實(shí)例代碼講解,在文章末尾給大家介紹了vue 利用slot向父組件傳值的方法,需要的朋友可以參考下
    2019-04-04
  • vue router 跳轉(zhuǎn)后回到頂部的實(shí)例

    vue router 跳轉(zhuǎn)后回到頂部的實(shí)例

    今天小編就為大家分享一篇vue router 跳轉(zhuǎn)后回到頂部的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 項(xiàng)目部署后前端vue代理失效問題解決辦法

    項(xiàng)目部署后前端vue代理失效問題解決辦法

    這篇文章主要給大家介紹了關(guān)于項(xiàng)目部署后前端vue代理失效問題的解決辦法,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-02-02
  • vue3如何使用provide實(shí)現(xiàn)狀態(tài)管理詳解

    vue3如何使用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-10
  • vue3 學(xué)習(xí)筆記之a(chǎn)xios的使用變化總結(jié)

    vue3 學(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常用組件之confirm用法及說明

    vue常用組件之confirm用法及說明

    這篇文章主要介紹了vue常用組件之confirm用法及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue實(shí)現(xiàn)登錄類型切換

    vue實(shí)現(xiàn)登錄類型切換

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄類型切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • 一次Vue中computed沒有觸發(fā)的原因以及排查經(jīng)歷

    一次Vue中computed沒有觸發(fā)的原因以及排查經(jīng)歷

    這篇文章主要介紹了一次Vue中computed沒有觸發(fā)的原因以及排查經(jīng)歷,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue2.0中set添加屬性后視圖不能更新的解決辦法

    vue2.0中set添加屬性后視圖不能更新的解決辦法

    在本文里我們給大家整理了關(guān)于vue2.0中set添加屬性后視圖不能更新的解決辦法以及相關(guān)知識(shí)點(diǎn),需要的朋友們學(xué)習(xí)下。
    2019-02-02

最新評(píng)論