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>