vue.js配合$.post从后台获取数据简单demo分享


Posted in Javascript onAugust 11, 2018

首先导入

<script type="text/javascript" src="/island/stage/js/vue.min.js"></script>

html样式:

<div id="main-content" class="wrap-container zerogrid">


<article id="news_content" v-for="item in items">
<div class="col-1-2 right">
<img :src="item.coverimage"/><!--img标签与src之间需要有空格-->
</div>
<div class="col-1-2 left">
<a class="art-category left" href="#" rel="external nofollow" rel="external nofollow" >{{item.releasetime}}</a>
<div class="clear"></div>
<div class="art-content">
<h2>{{item.title}}</h2>
<div class="info">
<a href="#" rel="external nofollow" rel="external nofollow" >{{item.author}}</a>
</div>
<div class="line"></div>
<p>{{item.content}}</p>
<a v-bind:href="['/island/stage/newscontent.html?id='+item.id]" rel="external nofollow" class="more">阅读全文</a> <!--属性数据绑定以及拼接-->
</div>
</div>
</article>

<!-- 循环结束(新闻) -->
</div>

js部分:

var vm = new Vue({
  el: '#main-content',
  data: {
  items : []
  }, //end data
  created:function(){
  $.post("/island/stage/queryOneAllNews.do",{"categoryid":parseInt(categoryid)},function(data){
  vm.items = data;
  });//end post
  } //created
 }); //end vue

注意:返回的json数组 并不需要JSON.stringify(data) 转成json字符串 items 这里需要的是json对象

当然 官网上推荐的是使用axios npm这种方式。

以上这篇vue.js配合$.post从后台获取数据简单demo就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
sails框架的学习指南
Dec 22 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
Vue.js用法详解
Nov 13 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 #Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 #Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 #Javascript
微信小程序滑动选择器的实现代码
Aug 10 #Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 #Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 #Javascript
You might like
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP加密解密函数详解
2015/10/28 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
详解php用static方法的原因
2018/09/12 PHP
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Python冒泡排序注意要点实例详解
2016/09/09 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Python编程中类与类的关系详解
2019/08/08 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
你常见到的runtime exception
2016/09/05 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
20年同学聚会感言
2014/02/03 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
检举信的写法
2019/04/10 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
如何Tomcat中使用ipv6地址
2022/05/06 Servers