vue绑值（表格）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>JSON取数测试</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<table border=1>
<tr>
<td>id</td>
<td>name</td>
<td>type</td>
<td>location</td>
</tr>
<tr v-for="r in rows">
<td>{{r.id}}</td>
<td>{{r.name}}</td>
<td>{{r.type}}</td>
<td>{{r.location}}</td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function () {
//发起请求
$.getJSON("json/vueceshi.json", function (result, status) {
//绑值关键代码
var v = new Vue({
el: '#main',
data: {
rows: result
}
})
});
});
</script>
</html>
-
json
[ { "id": 1, "name": "张三", "type": "省长", "location": "河北省" }, { "id": 2, "name": "李四", "type": "市长", "location": "北京市" } ] -
小插曲（渲染时的判断）
<tr v-for="r in rows"> <td> <input type="checkbox" value="1" name=""> </td> <td style="display: none"> {{r.partnersId}} </td> <td> {{r.partnersName}} </td> <td v-if="r.partnersType==1"> 个人 </td> <td v-else="r.partnersType==2"> 机构 </td> <td v-if="r.partnersStatus==1"> 洽谈中 </td> <td v-else="r.partnersStatus==2"> 合作中 </td> <td v-else="r.partnersStatus==3"> 终止合作 </td> <td> {{r.partnersProprotion}} </td> <td> {{r.partnersAddress}} </td> <td> {{r.partnersMan}} </td> <td> {{r.partnersContact}} </td> <td> 查看 </td> </tr>