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

 更新时间:2018年08月11日 11:27:25   作者:Islandww  
今天小编就为大家带来一篇vue.js配合$.post从后台获取数据简单demo分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

首先导入

<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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue实现动态显示textarea剩余字数

    Vue实现动态显示textarea剩余字数

    这篇文章主要为大家详细介绍了Vue实现动态显示textarea剩余文字数量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 基于vuejs+webpack的日期选择插件

    基于vuejs+webpack的日期选择插件

    这篇文章主要为大家详细介绍了基于vuejs+webpack的日期选择插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue实现时间倒计时功能

    vue实现时间倒计时功能

    这篇文章主要为大家详细介绍了vue实现时间倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue-iview动态新增和删除的方法

    vue-iview动态新增和删除的方法

    这篇文章主要为大家详细介绍了vue-iview动态新增和删除的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue后台实现点击图片放大功能的示例代码

    Vue后台实现点击图片放大功能的示例代码

    这篇文章主要为大家详细介绍了如何利用Vue实现点击图片放大功能,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考一下
    2022-12-12
  • Vue2实现全局水印效果的示例代码

    Vue2实现全局水印效果的示例代码

    这篇文章主要为大家学习介绍了如何利用Vue2实现全局水印的效果,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以了解下
    2023-07-07
  • 在Vue环境下利用worker运行interval计时器的步骤

    在Vue环境下利用worker运行interval计时器的步骤

    这篇文章主要介绍了在Vue环境下利用worker运行interval计时器的步骤,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue源码学习之关于对Array的数据侦听实现

    Vue源码学习之关于对Array的数据侦听实现

    这篇文章主要介绍了Vue源码学习之关于对Array的数据侦听实现,Vue使用了一个方式来实现Array类型的监测就是拦截器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • vue el-upload上传文件的示例代码

    vue el-upload上传文件的示例代码

    这篇文章主要介绍了vue el-upload上传文件的示例代码,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12
  • Element中Upload组件上传功能实现(图片和文件的默认上传及自定义上传)

    Element中Upload组件上传功能实现(图片和文件的默认上传及自定义上传)

    这篇文章主要介绍了Element中Upload组件上传功能实现包括图片和文件的默认上传及自定义上传,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01

最新评论