vue条件渲染与列表渲染

条件渲染

<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>=1000 && point< 2000">{{grade[0]}}</p>
  <p v-else-if="point>=2000 && point< 3000">{{grade[1]}}</p>
  <p v-else-if="point>=3000 && point< 4000">{{grade[2]}}</p>
  <p v-if="point>=4000">{{grade[3]}}</p>
  <!-- <p v-else>{{grade[4]}}</p> -->
</div>
<script>
  Vue.createApp({
    data() {
      return {
        message: '今天是前端最后一课',
        flag: true,
        // 会员级别
        grade: ['纸片会员', '木头会员', '铁皮会员', '金牌会员', '非会员
'],
        // 积分
        point: 3500,
      };
    },
  }).mount('.app');
</script>

列表渲染

 <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="(user,index) of users" :key="index">{{user.name}} 
: ({{user.email}})</li>
   </ul>
 </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: 'miejue@php.cn',
           },
           {
             name: '欧阳老师',
             email: 'ouyang@php.cn',
           },
         ],
       };
     },
   }).mount('.app');
 </script>