SOURCE

console 命令行工具 X clear

                    
>
console
new Vue ({
  el: "#app",
  data: {
    a: ['aa', 'bb', 'cc'],
    b: [
      {name: 'jiang', age: '25', color: 'red'},
      {name: 'jiang', age: '25', color: 'red'}
    ],
    qiehuan: true,
    c: ['11', '22', '33'],
    d: [
      {name: 'aaa', age: '111'},
      {name: 'bbb', age: '222'}
    ]
  }
})
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(aa, i) in a" :key="aa">{{ aa }}({{ i }})</li>
  </ul>
  <button @click="a.push('dd')">Add</button>
  <template v-for="(aaa, index) in a">
    <h1>{{ aaa }}</h1>
    <p>{{ index }}</p>
  </template>
  <ul>
    <li v-for="bb in b">
      <div v-for="(value, key, index) in bb">{{ value }}:{{ key }}({{ index }})</div>
    </li>
  </ul>
  <hr />
  <span v-for="n in 10">{{ n }}</span>
  
  <hr /><br />
  
  <div>
    <button @click="qiehuan = !qiehuan">切换</button>
    <p v-if="qiehuan">1</p>
    <p v-else>2</p>
  </div>
  <br /><br />
  <hr />
  
  <div v-for="(cc, i) in c">{{ cc }}({{ i }})</div>
  
  <hr />
  <div v-for="(v, k) in d">{{ k }}:{{ v }}</div
    <ul>
      <li v-for="v in d">
        <div v-for="(vv, k, index) in v">
          {{ k }} : {{ vv }},({{ index }})
        </div>
    </li>
    </ul>
</div>