Vue實(shí)現(xiàn)簡(jiǎn)單的發(fā)表評(píng)論功能
更新時(shí)間：2021年10月29日 11:36:33 作者：一個(gè)小點(diǎn)點(diǎn).
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單的發(fā)表評(píng)論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)簡(jiǎn)單的發(fā)表評(píng)論功能的具體代碼，供大家參考，具體內(nèi)容如下
1、這是我在學(xué)習(xí)中的實(shí)例，有些的不足的地方，還望各位大佬指點(diǎn)，感謝哦~
2、發(fā)表評(píng)論的效果圖
點(diǎn)擊“發(fā)表”之后的效果（每條評(píng)論之后點(diǎn)擊“刪除”可以刪掉這一整條評(píng)論~）
3、完整代碼展示（我html結(jié)構(gòu)寫(xiě)的比較亂，這里提醒大家一下，沒(méi)有定義類(lèi)的div是可以刪掉的，我是因?yàn)榉奖銓?xiě)樣式所以多加了div）
還是要提醒一下，不要忘記引入vue.js，目錄記得根據(jù)自己存放的位置改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js"></script>
<style type="text/css">
*{
margin: 0;padding: 0;
box-sizing: border-box;
}
#app{
width: 700px;
height: 650px;
margin: auto;
border: 1px solid #ccc;
}
#app h1{
width: 700px;
font-weight: 400;
line-height: 100px;
padding-left: 20px;
background-color: #cccccc;
margin-bottom: 20px;
}
#app>div{
padding: 0 20px;
}
#app>div>input{
width: 200px;
height: 30px;
padding: 0 5px;
margin: 5px 0;
}
#app>div>textarea{
padding: 5px;
margin-top: 5px;
}
.cont div{
height: 50px;
border: 1px solid #acacac;
border-radius: 5px;
padding: 0 10px;
}
.cont div span{
padding: 0 5px;
line-height: 50px;
}
.cont p{
display: inline-block;
}
.cont div p:nth-of-type(1){
color: #550000;
}
.cont div p:nth-of-type(2){
color: #595959;
}
.cont .del{
float: right;
line-height: 50px;
color: #003366;
cursor: pointer;
}
.cont .del:hover{
color: #550000;
}
.send{
width: 80px;
height: 30px;
margin-top: 10px;
}
hr{
border: 1px solid #bababa;
margin: 15px 0;
}
h3{
font-weight: 400;
color: #333;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="app">
<h1>歡迎來(lái)到吐槽大廳</h1>
<div>
<label>用戶名：</label><br>
<!-- .trim去除內(nèi)容中的空格 -->
<!-- v-model綁定表單的(uname)值 -->
<input type="text" placeholder="用戶名" v-model.trim="uname" /><br>
<label>吐槽內(nèi)容：</label><br>
<textarea rows="2" cols="23" placeholder="吐槽內(nèi)容" v-model.trim="tarea"></textarea><br>
<!-- @click="",設(shè)置點(diǎn)擊事件 -->
<button class="send" @click="sendCont()">發(fā)表</button>
<hr>
<h3>吐槽回復(fù)：</h3>
<!-- 遍歷list數(shù)據(jù) -->
<div class="cont" v-for="val in list" :key="val.name">
<div>
<p>{{val.name}}</p><span>說(shuō):</span>
<p>{{val.item}}</p>
<p class="del" @click="delCont(val)">刪除</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",//指定模板
data:{
list:[
{"name":"beibei","item":"媽媽,我想吃烤紅薯"},
{"name":"dian","item":"吃,吃大塊的"},
],
uname:"",
tarea:"",
},
methods:{
// "發(fā)表"按鈕的點(diǎn)擊事件
sendCont(){
// 創(chuàng)建一項(xiàng)清單
var item = {name:this.uname,item:this.tarea};
// 在list的前面添加item
this.list.unshift(item);
// 用戶框，內(nèi)容框清空
this.uname="";
this.tarea="";
},
// 評(píng)論最后的"刪除"事件
delCont(val){
alert("確定刪除？");
// 查找val在list下標(biāo)
// value遍歷的元素 當(dāng)value的item/name值等于val的item/name值
var ind = this.list.findIndex(value=>value.item===val.item);
// 刪除list第ind個(gè)
this.list.splice(ind,1);
}
}
})
</script>
</body>
</html>
4、到底啦，祝大家能夠?qū)W的愉快，再見(jiàn)
以上就是本文的全部?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開(kāi)發(fā)實(shí)現(xiàn)評(píng)論列表
- vue實(shí)現(xiàn)評(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)文章
這篇文章主要介紹了vue2.0+使用md-edit編輯器的解決方案，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2024-02-02
這篇文章介紹了Vue.js中v-on指令的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue的hash值原理也是table切換,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了vue表單驗(yàn)證之禁止input輸入框輸入空格，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單
這篇文章主要介紹了vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue?插槽?(Slots)?源碼解析與用法,通過(guò)實(shí)例,我們?nèi)媪私饬四J(rèn)插槽、具名插槽和作用域插槽的用法,并深入理解了其在Vue源碼中的實(shí)現(xiàn)原理,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue?中簡(jiǎn)單使用mock的方法，本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02
對(duì)于Vue項(xiàng)目來(lái)說(shuō)，如果遇到一個(gè)埋點(diǎn)的需求，我們最好的解決方案就是封裝一個(gè)指令，所以本文就來(lái)和大家詳細(xì)講講具體是如何封裝埋點(diǎn)指令的吧2023-08-08
Vue2?中自定義圖片懶加載指令?v-lazy實(shí)例詳解
這篇文章主要為大家介紹了Vue2?中自定義圖片懶加載指令?v-lazy實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
element滾動(dòng)條組件el-scrollbar的使用詳解
本文主要介紹了element滾動(dòng)條組件el-scrollbar的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04