Vue.js的v-for和Jquery的Ajax方法作用

来源：互联网发布：嘉贝逸飞淘宝网站编辑：程序博客网时间：2024/06/01 08:23

最近在做自己的网站，感觉vue用起来更加优雅，所以决定从jquery全面迁移到vue，工作量确实不小，以下提供一个vue的v-for和ajax调用的基本用法。

<div class="col-md-3" v-for="item in items" style="text-align: center;"><div><a href="{:U('Index/Detail/index',array('id'=>$v[id]))}"><img v-bind:src="'__PUBLIC__/files/'+item.id" class="img-thumbnail" style="width: 100%;height: 30rem;border: none;"></a></div><div><h4>{{item.bookname}}</h4></div><div style="border-top: 1px solid #ddd;"><div>￥{{item.prize}}    <span style="text-decoration: line-through;color: gray">￥{{item.cost}}</span></div></div></div><script type="text/javascript">var container=new Vue({el: '#container',data: {  items:""},beforeCreate:function(){                var url="http://127.0.0.1/ourbook2/index.php/Index/Welcome/books";                var _self=this;                $.get(url,function(data){                    _self.items=data;                })            }})</script>

通过json传参实现前后端分离，并且不得不说，vue的vm绑定用起来真的太爽了

阅读全文

0 0