給剛學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来展示表格数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。