<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divid="app"><ul><liv-for="value in data.number">
{{value}}
</li></ul><ul><liv-for="(value,index) in data.number">
index:{{index}}---value:{{value}}
</li></ul><ul><liv-for="(value,index) in data.user">
index:{{index}}---value:{{value}}
</li></ul><ul><liv-for="(value,key,index) in data.user">
index:{{index}}---key:{{key}}---value:{{value}}
</li></ul><ul><templatev-for="(value,key,index) in data.user"><liv-if="index==1">
index:{{index}}---key:{{key}}---value:{{value}}
</li></template></ul><ul><!-- title:鼠标移到上面,会显示 key:唯一标志,提升性能 --><liv-for="(value,index) in data.teacher":title="value.name":key="value.id">
index:{{index}}---value.id:{{value.id}}---value.name:{{value.name}}---value.web:{{value.web}}
</li></ul></div><scripttype="module">import{ createApp, reactive }from'./vue.esm-browser.js'createApp({setup(){const data =reactive({number:["一","二","三"],user:{name:"Alice",age:18},teacher:[{id:3001,name:"小明",web:"xiaoming.com"},{id:3002,name:"小红",web:"xiaohong.com"}]})return{
data
}}}).mount("#app")</script></body></html>