列表渲染
<!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 { // array cities: ['深圳', '广州', '中山'], // object: 关联数组 user: { name: '老朱', email: 'laozhu@php.cn', }, // array of object users: [ { 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>
