Atitit vue绑定json列表数据到表格最小简化培训版本 目录 1.1. 引入类库jq与vue 1 1.2. 获取ajax数据并推送到vue的内部自定义变量 1 1.3. 建立表格与vue变量
Atitit vue绑定json列表数据到表格最小简化培训版本
目录
1.2. 获取ajax数据并推送到vue的内部自定义变量 1
<script src="jquery-1.11.3.js"></script><script src="vue.js"></script>
<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>
注意表格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
相关文章
- vue.js响应式原理解析与实现
- vue+element列表排序
- Weex meets Vue,记一次 Weex 前端团队的讨论
- vue+element列表排序
- vue.js3: 用jszip打包压缩图片文件(vue@3.2.37 / jszip@3.10.0 / file-saver@2.0.5)
- vue.js3: 从详情页返回列表页,显示跳转前列表而不是第一页(vue@3.2.26)
- vue商城项目开发:axios发送请求及列表数据展示
- Vue 3 Composition API - “ref”和“reactive”
- vue跑马灯效果.html
- Vue:a标签点击和file-saver实现文件下载
- Vue项目中使用继承extends实现复用代码
- vue实现点击关注之后及时更新列表
- 测试开发之Vue学习笔记-Vue路由
- Vue.use()的用法详解
- ant-design-vue中a-table列表数据根据点击的表头进行升/降排序