vue计算属性 初步使用案例

html 复制代码
<template>
  <div>
    <h1>购物车</h1>
    <div v-for="item in filteredItems" :key="item.id">
      <p>{{ item.name }} - {{ item.price }} 元</p>
      <input type="number" v-model.number="item.quantity" min="1" />
      <button @click="removeItem(item.id)">移除</button>
    </div>

    <div>
      <label>
        筛选价格(仅仅筛选单价):
        <select v-model="priceFilter">
          <option value="all">全部</option>
          <option value="under50">小于 50 元</option>
          <option value="50to100">50 - 100 元</option>
          <option value="above100">大于 100 元</option>
        </select>
      </label>
    </div>

    <h2>总价:{{ totalPrice }} 元</h2>
    <button @click="clearCart">清空购物车</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { id: 1, name: "商品 A", price: 30, quantity: 1 },
        { id: 2, name: "商品 B", price: 60, quantity: 1 },
        { id: 3, name: "商品 C", price: 120, quantity: 1 },
      ],
      priceFilter: "all", // 筛选条件
    };
  },
  computed: {
    // 计算总价
    totalPrice() {
      return this.cartItems.reduce(
        (total, item) => total + item.price * item.quantity,
        0
      );
    },
    // 根据筛选条件过滤商品
    filteredItems() {
      if (this.priceFilter === "under50") {
        return this.cartItems.filter((item) => item.price < 50);
      } else if (this.priceFilter === "50to100") {
        return this.cartItems.filter(
          (item) => item.price >= 50 && item.price <= 100
        );
      } else if (this.priceFilter === "above100") {
        return this.cartItems.filter((item) => item.price > 100);
      } else {
        return this.cartItems;
      }
    },
  },
  methods: {
    // 移除商品
    removeItem(id) {
      this.cartItems = this.cartItems.filter((item) => item.id !== id);
    },
    // 清空购物车
    clearCart() {
      this.cartItems = [];
    },
  },
};
</script>

<style scoped>
h1,
h2 {
  color: #333;
}
button {
  margin-top: 10px;
}
</style>

效果展示

(本章节仅仅面向初步学习,页面简陋)

页面由下面代码决定

html 复制代码
<template>
  <div>
    <h1>购物车</h1>
    <div v-for="item in filteredItems" :key="item.id">
      <p>{{ item.name }} - {{ item.price }} 元</p>
      <input type="number" v-model.number="item.quantity" min="1" />
      <button @click="removeItem(item.id)">移除</button>
    </div>

    <div>
      <label>
        筛选价格(仅仅筛选单价):
        <select v-model="priceFilter">
          <option value="all">全部</option>
          <option value="under50">小于 50 元</option>
          <option value="50to100">50 - 100 元</option>
          <option value="above100">大于 100 元</option>
        </select>
      </label>
    </div>

    <h2>总价:{{ totalPrice }} 元</h2>
    <button @click="clearCart">清空购物车</button>
  </div>
</template>

其中 用v-for循环进行页面打印表单。

computed是计算属性,它与data同级代码块。

这个页面,由计算属性来操控。

我们的筛选板块,

用v-model对priceFilter进行了双向数据帮当,单选每一项的时候,会改变其值。

在我们的计算属性当中

会根据我们单项筛选,进行相应的页面展示,计算属性类似于函数,也有其返回值,返回值可以是个数组。

计算属性可以写多个 如同函数类似,

totalPrice()用于计算总价格

计算属性可用于插值表达式

相关推荐
毋若成23 分钟前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽26 分钟前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新1 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_2 小时前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2133 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy3 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪3 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞3 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-4 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与4 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts