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>