vue基础----用vue来展示表格数据

给刚学vue不就的兄弟，用bootstrop,

  <div class="container"><table class="table table-condensed table-bordered"><tbody><template v-for="(item,index) in attrs"><tr><th :colspan="2" class="head">{{item.group}}</th></tr><tr v-for="(item1, index1) in item.attributes"><td class="desc">{{item1.name}}</td><td v-html="getAttrHtml(item1)"></td></tr></template></tbody></table></div>

  <script>const attrs = [{"group": "Physical","attributes": [{"name": "Size","value": "160.8 x 78.1 x 7.4 mm#6.33 x 3.07 x 0.29 inches"},{"name": "Weight","value": "228 grams#8.03 ounces"}]},{"group": "Display / Screen","attributes": [{"name": "Description","value": "Super Retina XDR display | 458 ppi"},{"name": "Resolution","value": "2778 x 1284 pixels"},{"name": "Display Size","value": "6.7 inches"}]},{"group": "Processor","attributes": [{"name": "Description","value": "A14 Bionic chip"}]},{"group": "Camera(s)","attributes": [{"name": "Description","value": "Pro 12MP camera system: Ultra Wide, Wide, and Telephoto cameras"}]},{"group": "Battery","attributes": [{"name": "Replaceable","value": "No"}]}]const app = Vue.createApp({data() {return {attrs}},mounted() {console.log(attrs[0].group);},methods:{getAttrHtml(item1) {return  item1.value.replace("#","</br>")}}}).mount('#root')</script>

vue基础----用vue来展示表格数据相关推荐

[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选) 能够解决的问题在一个完整的数据数据渲染的 elementui 表格组件中,筛选输出数据目录布局代码 ...
vue项目使用yxg-xlsx-style组件将表格数据导出带有样式的excel文件
引入组件yxg-xlsx-style 导出excel主要逻辑文件(跟业务无关):excel-style.js import XLSX from 'yxg-xlsx-style'// 如果单元格是日期类 ...
vue el-table 显示/隐藏列异常-表格数据域高度变小
在我们需要对表格的列做动态的显示/隐藏时,会遇到一个问题,那就是在某一列从隐藏到显示时,整个表格会闪烁,仔细观察会发现是表格的表头高度瞬间变大,然后又缩回去了,这就导致一个问题,表格数据域的高度会变小 ...
Vue全家桶（一）：Vue基础+Vue-Cli+Vue组件化+过渡动画
目录 1.Vue概述 1.1 认识Vue 1.2 Vue的两核心 1.3 Vue的初体验 1.4 Vue的生命周期 2. Vue-CLI (Command Line Interface) 3. Vue ...
【Vue基础】Vue基础自测45题
Vue基础自测45题 1.什么是Vue?Vue的核心理念是什么? 2.什么是MVC和MVVM? 3.框架和库的区别? 4.插值表达式 5.vue指令界面防止闪烁 6.vue指令v-html和v-tex ...
Vue基础之Vue实例
构造器: 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的: 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选项. ...
【Python 实战基础】Pandas如何输出表格数据标题名称列表
目录一.实战场景二.主要知识点文件读写基础语法 Pandas read_csv 三.菜鸟实战 1.创建 python 文件 2.运行结果一.实战场景实战场景:Pandas如何输出表格数据标 ...
【一天时间|vue基础】vue组件间通信
一天时间系列文章是博主精心整理的面试热点问题和难点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速并高效地审视前端面试知识.直击技术痛点,主动出击,精密打击,这才是面试拿到高薪的秘诀 ...
Vue中使用Echarts仪表盘展示实时数据
在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. ...
Vue项目中指定区域的表格数据导出为Excel文件
vue项目中导出excel时有是会需要指定导出的区域如下图操作部分我们不需要导出只导出表格部分简记录下实现过程赋代码一. 安装三个依赖项 npm install -S file-saver np ...

vue基础----用vue来展示表格数据

vue基础----用vue来展示表格数据相关推荐

最新文章

热门文章