Vue画简单页面

div id="app"

    <div>
        <div :class="{tittle1:true}">
            <h2 v-for="(item ,index) in arr1" v-key="index" :class="{tittle1_1:true}">{{item.HotSearch}}</h2>
            <p v-for="(item ,index) in arr1" v-key="index" :class="{tittle1_2:true}">{{item.Subtitle}}</p>
        </div>

        <div v-for="(item ,index) in arr1" :class="{tittle2:true}">
            {{item.content}}
        </div>
    </div>
    <div>
        <ul>
            <li v-for="(item,index) in arr2" v-key="index" :class="{content:true}">
                <p>
                    <span :class="{span1:true}">{{item.name}}</span>
                    <span :class="{span2:true}">{{index+1}}楼</span>
                    <span :class="{span3:true}"><img src="./image/img1.png" alt="" :class="{img1:true}">
                        {{item.like}}</span>
                </p>
                <p :class="{comment:true}">{{item.comment}}</p>
            </li>
        </ul>
    </div>

script

    new Vue({
        el: '#app',
        data: {
            arr1: '',
            arr2: ''
        },
        created() {
            $.ajax({
                url: 'details.json',
                method: 'get',
                success: (res) => {
                    this.arr1 = res.title
                    this.arr2 = res.detailsPage
                    console.log(this.arr1, this.arr2);
                }
            })
        },
    })

** style**

• { margin: 0; padding: 0; list-style: none; }

   #app {
       width: 690px;
       margin: 0 auto;
   }
  
   .tittle1 {
       margin-bottom: 20px;
       padding-top: 20px;
   }
  
   .tittle1_1 {
       font-size: 20px;
       margin-bottom: 3px;
   }
  
   .tittle1_2 {
       font-size: 14px;
       color: #ccc;
   }
  
   .tittle2 {
       font-size: 14px;
   }
  
   .content {
       border-bottom: 1px #ccc solid;
       padding: 10px 0 10px 0;
       line-height: 30px;
   }
  
   .span1 {
       font-size: 14px;
       font-weight: bold;
   }
  
   .span2 {
       line-height: 20px;
       font-size: 12px;
       vertical-align: bottom;
       display: inline-block;
   }
  
   .span3 {
       font-size: 14px;
       float: right;
       margin-right: 10px;
   }
  
   .comment {
       font-size: 14px;
   }
  
   .img1 {
       width: 20px;
       height: 20px;
       vertical-align: text-top;
   }