条件渲染与列表渲染及改写购物车案例

1.条件渲染

<div class="app">
    <span>你现在的段位是：</span>
    <h2 v-if="point>=0 && point<400">{{grade[0]}}</h2>
    <h2 v-else-if="point>=400 && point<800">{{grade[1]}}</h2>
    <h2 v-else-if="point>=800 && point<1200">{{grade[2]}}</h2>
    <h2 v-else-if="point>=1200 && point<1600">{{grade[3]}}</h2>
    <h2 v-else-if="point>=1600 && point<2000">{{grade[4]}}</h2>
    <h2 v-else-if="point>=2000 && point<2400">{{grade[5]}}</h2>
    <h2 v-else-if="point>=2400 && point<2800">{{grade[6]}}</h2>
    <h2 v-else-if="point>=2800 && point<3200">{{grade[7]}}</h2>
    <h2 v-if="point>=3200">{{grade[8]}}</h2>
</div>
<script>
    Vue.createApp({
    data() {
        return {
        // 段位
        grade: [
            "坚韧黑铁",
            "英勇黄铜",
            "不屈白银",
            "荣耀黄金",
            "华贵铂金",
            "璀璨钻石",
            "超凡大师",
            "傲视宗师",
            "最强王者",
        ],
        // 积分
        point: 3200,
        };
    },
    }).mount(".app");
</script>

2.列表渲染

<div class="app">
    <span>列表渲染: 数组</span>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{index}} => {{item}}</li>
    </ul>
    <hr />
    <span>列表渲染: 对象数组</span>
    <ul>
        <li v-for="(item,index) of userInfo" :key="index">
            索引：{{index}}=>( 姓名：{{item.name}} ) (性别：{{item.sex}})  (邮箱：{{item.email}})
        </li>
    </ul>
</div>
<script>
    const app = Vue.createApp({
    data() {
        return {
        names: ["张三", "李四", "王五", "麻子"],
        userInfo: [
            { name: "张三", sex: "男", email: "zhangsan@qq.com" },
            { name: "李四", sex: "女", email: "lisi@qq.com" },
            { name: "王五", sex: "男", email: "wangwu@qq.com" },
            { name: "麻子", sex: "男", email: "mazi@qq.com" },
        ],
        };
    },
    }).mount(".app");
</script>

3.购物车案例

<div class="app">
  <div class="selectAll">
    <!-- v-model:双向绑定checked的状态 -->
    <input type="checkbox" class="check-all" name="check-all" v-model="checkAllStatus" />
    <label for="check-all">全选</label>
  </div>
  <ul class="list">
    <li>
      <span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span>
    </li>
      <!-- v-for 遍历 商品列表 -->
    <li v-for="(item,index) of prodInfo">
      <input type="checkbox" v-model="item.status" />
      <span class="content">{{item.name}}</span>
       <!-- v-model:双向绑定num的值 -->
      <input type="number" v-model="item.num" min="1" class="num" />
      <span class="price">{{item.price}}</span>
      <span class="amount">{{amount[index]}}</span>
    </li>
    <li>
      <span>总计:</span>
      <span class="total-num">数量: {{totalNum}}</span>
      <span class="total-amount">总金额: {{totalAmount}}</span>
    </li>
    <li>
      <span> 优惠:</span>
      <span class="difAmount">优惠: {{difAmount}}</span>
      <span class="realAmount">最终价: {{realAmount}}</span>
    </li>
  </ul>
  <!-- 3. 结算按钮 -->
  <button class="account">结算</button>
</div>

const app = Vue.createApp({
    data() {
      return {
        // 商品信息
        prodInfo: [
          { name: "手机", num: 1, price: 100, status: false },
          { name: "电脑", num: 2, price: 200, status: false },
          { name: "相机", num: 3, price: 300, status: false },
        ],
        difAmount: 0,
        realAmount: 0,
      };
    },
    // 计算属性
    computed: {
      checkAllStatus: {
        get() {
          // 列表中的复选框需要全部满足时 改变全选框的状态
          return this.prodInfo.every((item) => item.status === true);
        },
        set(ev) {
          // 使列表中的input的状态与全选框的状态保持一致
          this.prodInfo.forEach((item) => (item.status = ev));
        },
      },
      // 金额
      amount: {
        get() {
          return this.prodInfo.map((item) => item.price * item.num);
        },
        set(v) {},
      },
      //总数量
      totalNum: {
        get() {
          // 得到选中的数据
          let checkData = this.prodInfo.filter((item) => item.status === true);
          // 得到选中的数量数组
          let numArr = checkData.map((item) => item.num);
          return numArr.length === 0 ? 0 : numArr.reduce((acc, cur) => acc + cur);
        },
        set(v) {},
      },
      // 总金额
      totalAmount: {
        get() {
          // 得到选中的数据
          let checkData = this.prodInfo.filter((item) => item.status === true);
          // 得到选中的金额数组
          let amountArr = checkData.map((item) => item.num * item.price);
          return amountArr.length === 0 ? 0 : amountArr.reduce((acc, cur) => acc + cur);
        },
        set(v) {},
      },
    },
    // 侦听器属性
    watch: {
      totalAmount(current, origin) {
        // 根据当前金额确定打折
        switch (true) {
          // 1000-2000: 9折
          case current >= 1000 && current < 2000:
            this.discount = 0.9;
            break;
          // 2000 -> 3000 : 8折
          case current >= 2000 && current < 3000:
            this.discount = 0.8;
            break;
          // 3000 -> 4000 : 7折
          case current >= 3000 && current < 4000:
            this.discount = 0.7;
            break;
          // 4000 -> 5000 : 6折
          case current >= 4000 && current < 5000:
            this.discount = 0.6;
            break;
          // 5000 : 5折
          case current >= 5000:
            this.discount = 0.5;
            break;
          // 默认不打折
          default:
            this.discount = 1;
        }
        // 实付金额 = 原始金额 * 折扣率
        this.realAmount = this.totalAmount * this.discount;
        // 优惠金额(差价) = 原始金额 - 实付金额
        this.difAmount = this.totalAmount - this.realAmount;
      },
    },
  }).mount(".app");
</script>