vue评论@功能怎么做,vue 评论
这篇文章主要为大家详细介绍了某视频剪辑软件实现发表评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现发表评论的具体代码，供大家参考，具体内容如下
！声明文档类型
超文本标记语言
头
meta charset=utf-8
link rel=样式表 href= bootstrap-3。3 .7 .CSS /
标题/标题
/头
脚本src= vue-2。4 .0 .js /脚本
身体
div id=应用程序
ctm @func=show/ctm
ul class=列表组
list-group-item v-for= item in list :key= item。id
span class=徽章评论人{{item.user}}/span
{{item.content}}
/李
/ul
/div
模板id=tmp1
差异
div class=窗体-组
标签评论人：/标签
输入类型= text class= form-control v-model= user /
/div
div class=窗体-组
标签评论内容：/标签
textarea class= form-control v-model= content /textarea
/div
div class=窗体-组
输入类型= button class= BTN小学 value=发表评论@click=postComment/
/div
/div
/模板
脚本
var com={
模板：" #tmp1 "，
data(){
返回{
用户：,
内容：""
}
},
方法：{
后置注释(){
//得到的先摆出来
var comments={id:Date.now()，用户：this.user内容：this.content}
//获取之前列表所有的内容，由字符串形式转换成对象形式
var list=JSON。解析(本地存储。getitem( CMT ) [])
//往目录列表里面追加
list.unshift(注释)
//然后存到本地存储里面去，转化为字符串形式
localStorage.setItem(cmt ，JSON.stringify(list))
this.user=this.content=
这个emit(func )
}
}
}
//创建某视频剪辑软件实例，得到视图模型
var vm=new Vue({
埃尔： #app ，
数据：{
列表：[
{id:Date.now()，用户：小小，内容：天生我材必有用},
{id:Date.now()，用户：小小1 ,内容：天生我材},
]
},
//使用生命周期函数，已创建函数已经把数据和方法创建好了，必须用这
//需要自动刷新，所以要用到父组件为子组件传递方法
已创建(){
this.show()
},
方法：{
show(){
//显示，先获取本地存储的内容，转为对象
var list=JSON。解析(本地存储。getitem( CMT ) [])
这个列表=列表
}
},
组件：{
ctm:com
}
})
/脚本
/body
/html
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。