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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
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中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python开发之thread线程基础实例入门
2015/11/11 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Python基于template实现字符串替换
2020/11/27 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
付款承诺函范文
2015/01/21 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
JavaScript实现班级抽签小程序
2021/05/19 Javascript
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS