vue教程2-07 微博评论功能

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
<style>
[v-cloak]{
/*比较大的段落,防止闪烁,看到花括号*/
display: none;
}
</style>
<script src="../vue.js"></script>
<script src="../vue-resource.js"></script>
<script>
Vue.filter('date',function(input){
var oDate=new Date(input*1000);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
});
window.onload=function(){
var URL='weibo.php'; new Vue({
el:'.znsArea',
data:{ //vue的属性、数据
t1:'',
msgData:[]
},
methods:{
add:function(){
//发送请求
this.$http({
url:URL,
data:{ //后台发送数据
act:'add',
content:this.t1
}
}).then(function(res){
var json=res.data;
//msgData添加数据 this.msgData.unshift({
content:this.t1,
time:json.time,
acc:0,
ref:0,
id:json.id
}); this.t1='';
});
},
getPageData:function(n){
this.$http({
url:URL,
data:{
act:'get',
page:n
}
}).then(function(res){
//console.log(res.data);
var arr=res.data;
console.log(arr);
for(var i=0; i<arr.length; i++){
this.msgData.push({
content:arr[i].content,
time:arr[i].time,
acc:arr[i].acc,
ref:arr[i].ref,
id:arr[i].id
});
}
});
}
},
created:function(){
this.getPageData(1);
}
});
};
</script>
</head> <body>
<div class="znsArea">
<!--留言-->
<div class="takeComment">
<textarea name="textarea" class="takeTextField" id="tijiaoText" v-model="t1"></textarea>
<div class="takeSbmComment">
<input type="button" class="inputs" value="" @click="add" />
<span>(可按 Enter 回复)</span>
</div>
</div>
<!--已留-->
<div class="commentOn">
<div class="noContent" v-show="msgData.length==0">暂无留言</div>
<div class="messList">
<div class="reply" v-for="item in msgData" v-cloak>
<p class="replyContent">{{item.content}}</p>
<p class="operation">
<span class="replyTime">{{item.time|date}}</span>
<span class="handle">
<a href="javascript:;" class="top">{{item.acc}}</a>
<a href="javascript:;" class="down_icon">{{item.ref}}</a>
<a href="javascript:;" class="cut">删除</a>
</span>
</p>
</div>
</div>
<div class="page">
<a href="javascript:;" class="active">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</div>
</div>
</div>
</body>
</html>

vue教程2-07 微博评论功能的更多相关文章

  1. Vue 变异方法splice删除评论功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue学习(5)-评论功能(利用父组件的方法)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 第 14 篇:交流的桥梁“评论功能”——HelloDjango 系列教程

    截止到目前为止我们的 django blog 文章展示部分,已经实现的"八九不离十"了.你以为本系列文章就要结束了吗?不能够!新的征程才刚刚开始,HelloDjango 系列文章刚 ...

  4. 如何科学地蹭热点:用python爬虫获取热门微博评论并进行情感分析

    前言:本文主要涉及知识点包括新浪微博爬虫.python对数据库的简单读写.简单的列表数据去重.简单的自然语言处理(snowNLP模块.机器学习).适合有一定编程基础,并对python有所了解的盆友阅读 ...

  5. VuePress 博客优化之增加 Vssue 评论功能

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  6. 微博评论箱的隐藏Bug解决

    最近给站点添加社交评论功能,即用微博.QQ帐号就可以在网站上评论.其中Sina微博评论箱在IE和Firefox有个Bug,就是如果初始页面中微博评论箱所在那一部分处于不可见状态,那么后面即使切换了显示 ...

  7. 如何通过Gitalk评论插件,5分钟为你的博客快速集成评论功能

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  8. 接入gitment为hexo添加评论功能

    title: 接入gitment为hexo添加评论功能 toc: false date: 2018-04-16 10:59:56 categories: methods tags: hexo gitm ...

  9. 一篇文章教会你使用Python定时抓取微博评论

    [Part1--理论篇] 试想一个问题,如果我们要抓取某个微博大V微博的评论数据,应该怎么实现呢?最简单的做法就是找到微博评论数据接口,然后通过改变参数来获取最新数据并保存.首先从微博api寻找抓取评 ...

随机推荐

  1. Le Chapitre X

    Il se trouvait dans la région des astéroïdes 325, 326, 327, 328, 329 et 330. Il commença donc par le ...

  2. 一类n阶微分方程转1阶微分方程组

  3. sizeof新用法(c++11)

    1.概念 1)sizeof是关键字,也是运算符,用来求对象占用空间的大小,返回字节数 2)c++11允许使用作用域运算符(::)来获取类中成员的大小,以前只允许先创建一个类的对象,通过类对象访问成员得 ...

  4. c# 快速排序法并记录数组索引

    在遗传算法中,只需要对适应性函数评分进行排序,没必要对所有的个体也参与排序,因为在适应性函数评分排序是可以纪律下最初的索引,排序后的索引随着元素排序而变动,这样就知道那个评分对应那个个体了: usin ...

  5. Excel2007VBA数组和工作表及单元格的引用

    动态数组使用: https://zhidao.baidu.com/question/1432222709706721499.html 使用Redim动态数组即可. 1 2 3 4 5 6 7 8 Su ...

  6. ThinkPHP5 <= 5.0.22 远程代码执行高危漏洞

    漏洞描述 由于ThinkPHP5框架对控制器名没有进行足够的安全检测,导致在没有开启强制路由的情况下,黑客构造特定的请求,可直接GetWebShell. 漏洞评级 严重 影响版本 ThinkPHP 5 ...

  7. 线程之threading

    多任务:操作系统同时运行多个任务 线程:一个程序运行起来之后一定有一个执行代码的东西,该东西即为线程 线程是操作系统调度执行的最小单位   * 并发:指的是任务数多余cpu核数,通过操作系统的各种任务 ...

  8. CentOS 6.0 安装配置rails 2.3.11 + redmine 1.2.1 笔记

    没想到安装过程这么曲折,gem安装时下载经常是不成功的,无耐只好把.gem文件下载回来再本地安装,加上radmine 1.2.1对各组件的版本了也比较挑剔,中间走了不少弯路,折腾了二天时间,终于摸清路 ...

  9. Android webview 退出关闭声音 网页调用javascript

    关闭声音,目前没有好的办法,可以参考网络上的实用webview.reload(); @Override protected void onResume() { // TODO Auto-generat ...

  10. [ASE][Daily Scrum]11.05

    在昨天的课程之后经过讨论进行了初步的分工,并制定出了我们的一个两周计划. 尚没有和老师讨论,已经询问了时间没有收到回复,等老师那边讨论过后我会在更新这个部分. 第一阶段的目标是用户能够在一个空白的地图 ...