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 相关文章推荐
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
jQuery选择器全集详解
Nov 24 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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中操作Excel实例代码
2010/04/29 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python下Fabric的简单部署方法
2015/07/14 Python
详解python之heapq模块及排序操作
2019/04/04 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
网站开发实习生的自我评价
2013/12/11 职场文书
初中军训感想300字
2014/03/05 职场文书
租房协议书怎么写
2014/04/10 职场文书
初中数学教学反思范文
2016/02/17 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android