亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

條件渲染

<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: 指令循環(huán)輸出  -->
   <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: 對象數(shù)組  -->
   <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: 關(guān)聯(lián)數(shù)組
         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>

批改老師：PHPz

批改狀態(tài)：合格

老師批語：