实例演示列表渲染与条件渲染指令

实例演示列表渲染与条件渲染指令

一、实例演示列表渲染

一）快速输出列表代码片段

<!-- v-for指令快速循环输出列表  -->
      <ul>
        <li v-for="city of cities">{{city}}</li>
      </ul>
      <hr />
      <ul>
        <li v-for="(item,key) of user" :key="key">{{key}}:{{item}}</li>
      </ul>
  <script>
      const app = Vue.createApp({
        data() {
          return {
            cities: ["合肥", "上海", "南京"],
            user: {
              name: "朱老师",
              email: "65535424@qq.com",
            },
          };
        },
      });
      const vm = app.mount(".app");
    </script>

二）实现的效果图

二、实例演示列条件渲染指令

一）v-if:条件渲染指令代码

  <div class="app">
      <!-- v-if:条件渲染指令 -->
      <p v-if="flag">{{message}}</p>
      <button v-text="flag ? '影藏':'显示'"></button>
      <!-- if-else,if else if -->
      <p v-if="point>=1000&&point<2000">{{grade[0]}}</p>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            message: "前端快结束了",
            flag: true,
            // 会员plus级别
            grade: ["纸片会员", "木头会员", "铁皮会员", "金牌会员", "非会员"],
            point: 1500,
          };
        },
      }).mount(".app");
    </script>

一）v-if:条件渲染实现效果