博客

官方文档有更详细的解释以及代码：

https://cn.vuejs.org/v2/guide/list.html

声明：

仅此记录实践当中出现的问题及解决办法，有许多错误，望能得到大家的指正！！！ 不胜感激 。 如果有遇到跟我相同的问题可以留言，我会及时回复，

虽然我也很菜！！！

Vue部分代码：list为渲染到页面的数据

var menuList =	new Vue({
	el: '#zhongxingss',
	data:{
		 list:[],
		 page:1,
		 rows:10,
		 type:100,
		 total:0
	},
created:function(){
	var _this=this;
	$.ajax({
		url : projectName + '/user/getFoolMenuLibraryList?page=' + page
				+ '&rows=' + rows+ '&type=' + type,
		type : 'GET',
		success : function(d) {
			_this.page = page;
			_this.rows = $("#changeCount").val();
			_this.type = type;
			_this.list = d.list;
			build_page_nav(d);
		},
		error : function() {
			console.log("服务异常" + 222)
			window.location.reload();
		}
	})
	
},
methods:{
	editmenu:function(id){
		 top.jzts();
		 var diag = new top.Dialog();
		 diag.Drag=true;
		 diag.Title ="菜品详情";
		 diag.URL = projectName+'/user/foolMenuEdit?foolMenuID='+id;
		 diag.Width = 469;
		 diag.Height = 510;
		 diag.CancelEvent = function(){ //关闭事件
			 window.location.reload();
			diag.close();
		 };
		 diag.show();
	},
	delmenu:function(id){
		 bootbox.confirm("确定要删除此菜品吗?", function(result){
				 if(result) {
					var url = projectName+"/user/DeletefoolMenuLibrary?id="+id;
					$.ajax({
						url:url,
						data:id,
						type:"get",
						success:function(data){
							//成功，刷新当前页面
							window.location.reload();
						},
						error:function(){
							alert("服务器异常，请稍后再试");
							window.location.reload();
						}
					});
				} 
			}); 		
	},
	chooseAll:function(){
		if($("#zcheckbox").is(":checked")){
			 $("input[name='ids']:checkbox").each(function(){ 
	              $(this).prop("checked", true);  
	        });
		}else{
			$("input[name='ids']:checkbox").each(function() {   
	              $(this).prop("checked", false);  
	        });
		}
	},
	//跳转页面
	gotoPage:function(){gotoPage()}

} 

})

Html代码：

<tr v-cloak v-for="ser in list">
	<td class='center' style="width: 30px;">
       <label><input type='checkbox' name='ids':value="ser.id" class="ace" /><span                                                                                                                                                                               class="lbl"></span></label>                        
	<td class='center'>{{ser.id }}</td>
    <td class='center'>{{ser.foolTitle }} </td>
	<td class="center">{{ser.foolMakeTime }}分钟</td>
	<td calss="center" style="text-align: center;">{{ser.foolPrice }}元</td>
	<td calss="center" style="text-align: center;"><span>{{ser.foolShopId == null?"公共菜品":"私有菜品 id="+ser.foolShopId}}  </span></td>
	<td calss="center" style="text-align: center;">{{ser.foolAddUserId }}</td>
	<td class='center'><div class="hidden-sm hidden-xs action-buttons"><a class="green" @click="editmenu(ser.id)"> <i class="ace-icon fa fa-pencil-square-o bigger-130"title="修改"></i></a> 
        <a class="red" @click="delmenu(ser.id)"> <i class="ace-icon fa fa-trash-o bigger-130" title="删除"></i></a>
</div>
    <div class="hidden-md hidden-lg">
		<div class="inline pos-rel">
			<button class="btn btn-minier btn-yellow dropdown-toggle"data-toggle="dropdown" data-position="auto"><i class="ace-icon fa fa-caret-down icon-only bigger-120"></i></button>
<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
<li>
<a @click="editTb(ser.id);" class="tooltip-info"data-rel="tooltip" title="View"> <span class="blue"><i class="ace-icon glyphicon glyphicon-picture bigger-120"title="编辑图标"></i></span>	
</a>
</li>
  <li>
    <a @click="editmenu(ser.id)" class="tooltip-success" data-rel="tooltip" title="Edit">    
        <span class="green"> <iclass="ace-icon fa fa-pencil-square-o bigger-120"title="修改"> </i></span>
    </a>
  </li>
    <li>
     <a @click="delmenu(ser.id)"class="tooltip-error" data-rel="tooltip" title="Delete"><span class="red"> <i	class="ace-icon fa fa-trash-o bigger-120" title="删除"></i></span>
    </a>
        </li>
       </ul>
     </div>
    </div>
   </td>
 </tr>

html代码格式有点乱！！！  排这个版我心都累了，将就吧！！！

下面是通用的ajax请求数据，后台返回数据并赋值给list  然后进行渲染

menuList.rows=rows;   最重要的一点

function gotoByAjax(pageNum, rows, type) {
	$.ajax({
		url : projectName + '/user/getFoolMenuLibraryList?page=' + pageNum+'&rows=' + rows+ '&type=' + type,
		type : 'GET',
		success : function(d) {
			menuList.list = d.list;
			pageInfo = d;
			total = d.total;
			rows = $("#changeCount").val();
			menuList.rows=rows; //前面我定义了menuList所以直接menuList.rows即可获取，
                        //若没有进行定义Vue变量，可以利用Vue.set(target,key，value); target：要更改的数据源(可以是对象或者数组)  key：要更改的具体数据(可以是字符串和数字) value ：重新赋的值，当然还有其他赋值的方法
			list = d.list;
			build_page_nav(d);
		},
		error : function() {
			console.log("服务异常" + 222)
		}
	})
}