1. 程式人生 > >Vue.js的v-for和Jquery的Ajax方法作用

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

最近在做自己的網站,感覺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繫結用起來真的太爽了