<!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>
