vue 评论,vue评论组件
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单的发表评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单的发表评论功能的具体代码，供大家参考，具体内容如下
1、这是我在学习中的实例，有些的不足的地方，还望各位大佬指点，感谢哦~
2、发表评论的效果图
点击"发表"之后的效果（每条评论之后点击"删除"可以删掉这一整条评论~)
3、完整代码展示（我超文本标记语言结构写的比较乱，这里提醒大家一下，没有定义类的差异是可以删掉的，我是因为方便写样式所以多加了div)
还是要提醒一下，不要忘记引入vue.js，目录记得根据自己存放的位置改
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题/标题
脚本src= ./vue。js /脚本
style type=text/css
*{
边距：0;填充：0;
框大小：边框-框；
}
#app{
宽度：700像素
高度：650像素
边距：自动；
边框：1px纯色# ccc
}
#应用h1{
宽度：700像素
字体粗细：400;
行高：100像素
左填充：20px
背景色：# cccccc
边距-底部：20px
}
#appdiv{
填充：0 20像素
}
#appdivinput{
宽度：200像素
高度：30px
填充：0 5px
边距：5px 0；
}
#appdivtextarea{
填充：5px
边距-顶部：5px
}。继续部门
高度：50px
边框：1px固体# acacac
边框半径：5px
填充：0 10px
}。连续分区跨度{
填充：0 5px
行高：50px
}。续页
显示：内嵌-块；
}。第n种类型(1){
颜色：# 550000;
}。第n种类型(2){
颜色：# 595959;
}。内容德尔{
浮动：对；
行高：50px
颜色：# 003366;
光标：指针；
}。内容德尔：悬停{
颜色：# 550000;
}。发送{
宽度：80px
高度：30px
页边距-顶部：10px
}
hr{
边框：1px纯色#巴巴巴；
边距：15px 0；
}
h3{
字体粗细：400;
颜色：# 333;
边距-底部：10px
}
/风格
/头
身体
div id=应用程序
氕欢迎来到吐槽大厅/h1
差异
标签用户名：/labelbr
！- .整齐去除内容中的空格-
！- v型车绑定表单的(uname)值-
输入类型=text placeholder=用户名v-model.trim=uname /br
标签吐槽内容：/labelbr
textarea rows= 2 cols= 23 placeholder=吐槽内容v型车。trim= tarea /textarea br
！- @click= ，设置点击事件-
button class= send @ click= send cont()发表/按钮
整点
h3吐槽回复：/h3
！-遍历目录数据-
div class= cont v-for= val in list :key= val。名称
差异
p{{val.name}}/pspan说：/span
p{{val.item}}/p
@ click= del cont(val)删除/p
/div
/div
/div
/div
脚本类型=文本/javascript
新Vue({
el:#app ，//指定模板
数据：{
列表：[
{ 姓名:贝贝,物品:妈妈，我想吃烤红薯},
{ 名称:点,项:吃，吃大块的},
],
乌纳梅：,
塔里亚：,
},
方法：{
//发表按钮的点击事件
sendCont(){
//创建一项清单
var item={name:this.uname，item:this。tarea }；
//在目录的前面添加项目
这个。列表。联合国班次(项目)；
//用户框，内容框清空
这个。uname=
这个。tarea=
},
//评论最后的删除事件
delCont(val){
警报(确定删除？);
//查找英国压力单位在目录下标
//值遍历的元素当价值的项目/名称值等于英国压力单位的项目/名称值
var ind=this。列表。查找索引(值=值。item===val。项)；
//删除目录第ind个
this.list.splice(ind，1)；
}
}
})
/脚本
/body
/html
4.毕竟祝大家学习愉快。再见。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。