收藏
PHPz批改状态：合格
老师批语：
<!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-for</title><script src="https://unpkg.com/vue@next"></script></head><body><div class="app"><!-- array --><ul><li>{{cities[0]}}</li><li>{{cities[1]}}</li><li>{{cities[2]}}</li></ul><hr><!-- v-for: 指令循环输出 --><ul><!-- <li v-for="city of cities">{{city}}</li> --><li v-for="(city,index) of cities" :key="index">{{index}} : {{city}}</li></ul><hr><!-- v-for:对象数组 --><ul><!-- <li v-for="city of cities">{{city}}</li> --><li v-for="(user,index) of users" :key="index">{{user.name}} : {{user.email}}</li></ul><hr></div><script>const app = Vue.createApp({data() {return {// arraycities: ['深圳', '广州', '中山'],// object: 关联数组user: {name: '老朱',email: 'laozhu@php.cn',},// array of objectusers: [{name: '老朱',email: 'laozhu@php.cn',},{name: '老李',email: 'laoli@php.cn',},{name: '老陈',email: 'laochen@php.cn',},],};},}).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@next"></script></head><body><div class="app"><p v-if="flag">{{message}}</p><button @click="flag=!flag" v-text="flag ?'隐藏' : '显示'"></button><!-- if-else, if else if else --><p v-if="point>=100 && point<500">{{grade[0]}}</p><p v-else-if="point>=500 && point<1500">{{grade[1]}}</p><p v-else-if="point>=1500 && point<2500">{{grade[2]}}</p><p v-if="point>=2500">{{grade[3]}}</p><!-- <p v-else>{{grade[4]}}</p> --></div><script>Vue.createApp({data(){return{message: 'xx网咖',flag: true,// 会员级别grade: ['普通会员', '黄金会员', '白银会员', '钻石会员', '非会员'],// 积分point: 2500,};},}).mount('.app');</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
