Vue.js的v-for和Jquery的Ajax方法作用
阿新 • • 發佈:2019-01-31
最近在做自己的網站,感覺vue用起來更加優雅,所以決定從jquery全面遷移到vue,工作量確實不小,以下提供一個vue的v-for和ajax呼叫的基本用法。
通過json傳參實現前後端分離,並且不得不說,vue的vm繫結用起來真的太爽了<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>