1. 程式人生 > >vue綁值(表格)

vue綁值(表格)

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>