Atitit vue绑定json列表数据到表格最小简化培训版本 目录 1.1. 引入类库jq与vue 1 1.2. 获取ajax数据并推送到vue的内部自定义变量 1 1.3. 建立表格与vue变量

Atitit vue绑定json列表数据到表格最小简化培训版本

 

目录

1.1. 引入类库jq与vue 1

1.2. 获取ajax数据并推送到vue的内部自定义变量 1

1.3. 建立表格与vue变量之间的绑定关系 1

 

 

1. 1. 引入类库jq与vue

<script src="jquery-1.11.3.js"></script><script src="vue.js"></script>

 

 

1. 1. 获取ajax数据并推送到vue的内部自定义变量

<script defer>

    $.getJSON("http://localhost/t.php" , function(result){

//建立vue与表格的绑定关系，同时设置初始值为空[]

//el就是表格id   //list_data1是自定义的数据列表

var   VueObj1 =  new Vue({

  el: '#table1',

  data: {

list_data1: []

  }

   });

//  把数据绑定到表格对应VUe变量  

 VueObj1.$data.list_data1=result;

 

 

  });

 

</script>

1. 1. 建立表格与vue变量之间的绑定关系

注意表格id的设定与  v-for扩展html循环命令

 

 

<table width="100%" border="1" id="table1">

  <tbody>

    <tr>

      <td bgcolor="#BCB8B8">name</td>

      <td bgcolor="#BCB8B8">yuear</td>

      <td> </td>

    </tr>

    <tr  v-for="dataItem in list_data1">

      <td> {{dataItem.name}} </td>

      <td> {{dataItem.year}} </td>

      <td> </td>

    </tr>

    <tr>

      <td> </td>

      <td> </td>

      <td> </td>

    </tr>

  </tbody>

</table>

 

 

Ref

vue bind json list to table