vue綁值（表格）
阿新 • • 發佈：2018-11-30
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>