一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码App.vue

vue代码

<template>
  <div id="app">
    <h1> 1 text interpolation using the “Mustache” syntax</h1>
    <h2>for text: {{ msg }}</h2>    
    <h2>for object: {{obj.name}}</h2>

    <h1>2 v-for in list</h1>
<ul>
  <li v-for="item in listObj" :key="item.id">
    {{item.title}}  
  </li>
</ul>

<ul>
  <li v-for="item in listInList"  :key="item.id">
  {{item.cate}}
  <br>
    <ol>
      <li v-for="i in item.list"  :key="i.id">
        {{i.title}}
      </li>
    </ol>
  </li>
</ul>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      obj:{name:'a test man'},
      list:[11,22,33],
      listObj:[
        {'title':"title1"},
        {'title':"title2"},
        {'title':"title3"},
      ],
      listInList:[
        {
            "cate":"cate1",
            "list":[
              {'title':'inter11'},
              {'title':'inter12'}
            ]
        },
        {
            "cate":"cate2",
            "list":[
              {'title':'outer33'},
              {'title':'outer44'}
            ]
        }
      ]
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

/* li {
  display: inline-block;
  margin: 0 10px;
} */

a {
  color: #42b983;
}

ol{padding-left: 20px;}

ol li{
  list-style-type:decimal;
  list-style-position:inside;
}
</style>

五 运行

npm run dev

image.png

六 总结

1 使用模板替换数据，使用{{变量名}}替换文本
2 使用v-for循环显示数据，显示在li标签