demo练习
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
</head>
<body >
<ul>
<li v-for="i in 10" :id="i">看看我是第{{ i }}个</li>
</ul>
<hr/>
<ul>
<li v-for="(value,index) in arrayLists" :id="index+1">
{{ value }}
</li>
</ul>
<hr/>
<ul>
<li v-for="(value,index) in arrayObject" :index="index+1"> {{ Object.keys(value)[0]}} :{{ value[Object.keys(value)[0]] }} </li>
</ul>
<hr/>
<ul v-for="(value,index) in arrayObjects" :index="index+1">
<li v-for="(value1,key1,index1) in value" :index="index1+1">
{{key1 }}:{{ value1 }}
</li>
</ul>
<hr/>
<ul>
<li v-for="(value,key,index) in nativeObject" :index="index+1">
{{ key }}:{{ value }}
</li>
</ul>
<hr/>
<ul>
<li v-for="(v,i) in stringObject" :index="i+1">
{{ v }}
</li>
</ul>
<hr/>
<ul>
<li v-for="v in tupleObject" >
{{ v }}
</li>
</ul>
</body>
<script type="text/javascript">
const app = Vue.createApp({
data(){
return{
arrayLists:['第一个数据','第二个数据','第三个数据'],
arrayObject:[{'剑圣':'血高防高'},{'德玛西亚':'爆伤高攻高'},{'迪卢克':'群伤增益'}],
nativeObject:{
'苹果':8889,
'华为':6888,
'小米':2888,
'一加手机':9999
},
stringObject:'这是一个宣传条幅',
arrayObjects:[{'剑圣':'血高防高','套装1':'浴血奋战套'},{'德玛西亚':'爆伤高攻高','套装2':'飞龙在天套'},{'迪卢克':'群伤增益','套装3':'明目张胆套'}],
}
}
})
app.mount('body')
</script>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通