今天小编就为大家带来一篇vue.js配合$.post从后台获取数据简单demo分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
首先导入
<script type="text/javascript" src="https://www.jb51.net/island/stage/js/vue.min.js"></script>
html样式：
<div> <article v-for="item in items"> <div> <img :src="item.coverimage"/><!--img标签与src之间需要有空格--> </div> <div> <a href="#" >{{item.releasetime}}</a> <div></div> <div> <h2>{{item.title}}</h2> <div> <a href="#" >{{item.author}}</a> </div> <div></div> <p>{{item.content}}</p> <a v-bind:href="['/island/stage/newscontent.html?id='+item.id]">阅读全文</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就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: