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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
自制简易打赏功能的实例
Sep 02 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
详解webpack 热更新优化
Sep 13 Javascript
vue移动端的左右滑动事件详解
Jun 17 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
python中子类继承父类的__init__方法实例
2016/12/15 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
numpy数组广播的机制
2019/07/12 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书