vue利用v-for嵌套输出多层对象,分别输出到个表的方法


Posted in Javascript onSeptember 07, 2018

如下所示:

specifications:[
 {
  specificationName:"颜色",
  specificationItem:[
   {value:"黄色"},
   {value:"黑色"}
   ]
 }
]
<table class="table table-bordered table-hover table-item spggdytable"
  id="ggxtable" v-show="isAddSpecifications">
 <thead>
 <tr>
  <th>排序</th>
  <th>规格项</th>
  <th>操作</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="(item,index) in specifications">
  <td>{{index}}</td>
  <td>{{item.specificationName}}</td>
  <td>
   <a href='#'> <img src='../img/common_edit@25.png' alt='修改'></a>
   <a href='#'><img src='../img/common_del@25.png' alt='删除'></a>
  </td>
 </tr>
 </tbody>
</table>
<table class="table table-bordered table-hover table-item spggdytable"
  id="ggztable" v-show="isAddSpecifications">
 <thead>
 <tr>
  <th>规格值</th>
  <th>操作</th>
 </tr>
 </thead>
 <tbody v-for="(item,index) in specifications">
 <tr v-for="(part,n) in item.specificationItem">
  <td>{{part.value}}</td>
  <td>
   <a href='#'> <img src='../img/common_edit@25.png' alt='修改'></a>
   <a href='#'><img src='../img/common_del@25.png' alt='删除'></a>
  </td>
 </tr>
 </tbody>
</table>

vue利用v-for嵌套输出多层对象,分别输出到个表的方法

以上这篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
Vue实现todo应用的示例
Feb 20 Vue.js
Vue中使用sass实现换肤功能
Sep 07 #Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 #jQuery
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 #Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 #Javascript
koa socket即时通讯的示例代码
Sep 07 #Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 #Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 #Javascript
You might like
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP安全下载文件的方法
2016/04/07 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
微信小程序解析富文本过程详解
2019/07/13 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
Python基于PycURL实现POST的方法
2015/07/25 Python
深入理解python多进程编程
2016/06/12 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python检测服务器端口代码实例
2019/08/31 Python
python绘制动态曲线教程
2020/02/24 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
银行毕业实习自我鉴定
2013/09/19 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
股东协议书
2014/04/14 职场文书
工作岗位说明书模板
2014/05/09 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
学校党员干部承诺书
2015/05/04 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python