![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<!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/dist/vue.global.js"></script></head><body><!-- 列表渲染 --><div class="app"><ul><!-- 数组 --><li v-for="(city,key) of cities" :key="key">{{key}} : {{city}}</li></ul><ul><!-- 对象 --><li v-for="(item,key) of user" :key="key">{{key}} : {{item}}</li></ul><ul><!-- 对象数组 --><li v-for="(item,key) of users" :key="key">{{item.name}} : {{item.email}}</li></div><script>const app = Vue.createApp({data() {return {cities:['福建', '广东', '浙江'],user: {name: '朱老师',email: '498668472@qq.com',},users: [{name: '朱老师',email: '498668472@qq.com',},{name: '灭绝老师',email: '345678@qq.com',},{name: '欧阳老师',email: '789666@qq.com',},],}},})const vm = app.mount('.app')</script></body></html>
<!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>条件渲染v-if</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body class="app"><p v-if="fs >= 0 && fs < 60">{{pj[0]}}</p><p v-else-if="fs >= 60 && fs < 70">{{pj[1]}}</p><p v-else-if="fs >= 70 && fs < 85">{{pj[2]}}</p><p v-else="fs >= 85 && fs <= 100">{{pj[3]}}</p></body><script>const app = Vue.createApp({data() {return {pj:['不及格', '及格', '良好', '优秀'],fs:66,}},}).mount('.app')</script></html>