test4.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VueJS2 的循环输出-vuejs实战教程[云海天教程]</title>
    <meta name="keywords" content="Vue.js 教程,vue教程,新手入门教程,vue实例教程,vue基础教程,vue教程案例实战项目,最全vue项目实战">
    <meta name="description" content="Vuejs的循环输出,vuejs实战教程">

	</head>
	<body>
    <div id="app">
        <!-- 第三步输出 -->
        <ul>
          <li v-for="fruit in fruits">{{ fruit }}</li>
        </ul>
       <div class="active" v-for="article in articles">
              <h5><span>{{ article.id }}:</span>{{ article.title }}</h5>
              <p>{{ article.body }}</p>
        </div>

        <hr >
        <!-- 循环单一对象 -->
            <ul>
              <li v-for="arts in articles[1]">
                {{arts}}
              </li>
            </ul>
    </div>


<hr >
<!-- 模仿后台加载 -->
    <div id="app2">
        <!-- 第四步输出 -->

        <template v-if="loaded">
            <div class="active" v-for="article in articles">
                  <h5><span>{{ article.id }}:</span>{{ article.title }}</h5>
                  <p>{{ article.body }}</p>
            </div>
        </template>
        <template v-else>
          加载中...3秒后显示
        </template>
    </div>




    <!-- 第一步引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <!-- 第二步定义 -->
    <script type="text/javascript">
      let app = new Vue({
        el:"#app",
        data:{
          fruits : ['苹果','西瓜','葡萄','香蕉'],
          articles : [
            { id : 1, title : '吃苹果的好处', body : '测试苹果内容1' },
            { id : 2, title : '吃西瓜的好处', body : '测试西瓜内容2' },
            { id : 3, title : '吃葡萄的好处', body : '测试葡萄内容3' },
            { id : 4, title : '吃香蕉的好处', body : '测试香蕉内容4' },
          ]
        }

      })

      let app2 = new Vue({
        el:"#app2",
        data:{
          loaded : false,
          articles :null
        },
        mounted() {
          //模拟Ajax
          setTimeout(()=>{
            this.articles =  [
              { id : 1, title : '吃苹果的好处', body : '测试苹果内容1' },
              { id : 2, title : '吃西瓜的好处', body : '测试西瓜内容2' },
              { id : 3, title : '吃葡萄的好处', body : '测试葡萄内容3' },
              { id : 4, title : '吃香蕉的好处', body : '测试香蕉内容4' },
            ];
            this.loaded = true
          },3000)

        }

      })

    </script>
<p>

	</body>
</html>