【Vue3】官网项目･Vue Mastery Sock-4（计算属性）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

计算属性

简单解释下这个模块的主要想做的，其实就是将本来固定的属性值变为通过计算得到的值

实现目标

1. 标题拼接

2. 颜色区分

   1. 能够在鼠标移动到不同颜色的圆圈上时，在库存信息处根据该颜色的库存量分别显示该颜色的库存情况，无库存则图片半透明和按钮点击

3. 在计算属性中添加判断

1. 标题拼接

实现步骤

1. 在main.js文件中添加变量和计算方法

const app = Vue.createApp({
    data() {
        return {
            cart: 0,
            inStock: false,
            product: 'Socks',
            brand: 'Vue Mastery',
            image: './assets/images/socks_green.jpg',
            url: 'https://www.vuemastery.com/',
            inventory: 0,
            details: ['50% cotton', '30% wool', '20% polyester'],
            variants: [
                { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },
                { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' }
            ]
        }
    },
    methods: {
        addToCart() {
            this.cart += 1
        },
        updateImage(variantImage) {
            this.image = variantImage
        }
    },
    computed: {
        title() {
            return this.brand + " " + this.product
        }
    }
})

2. 修改index.html文件

<h1>{{ title }}</h1>

测试效果

2. 颜色区分

这个对我来说有点复杂，所以在这里我们先分析下实现思路 ->

我们需要根据用户鼠标移动的位置（绿圈圈/蓝圈圈，这里引入了序号0和1来分别代表绿色和蓝色）来判断用户想要获取哪个颜色的产品信息，然后根据获取到的产品信息来显示产品图片、判断产品库存、进而判断出是显示“库存充足/库存紧张/无库存”，再进一步判断出按钮的显示样式（是否可点击）等

实现步骤

1. 在产品信息中添加代表库存的变量

variants: [
                { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 },
                { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 }
            ]

2. 将html中直接获取颜色的方式改为获取整个产品信息的方式

index.html

          <div v-for="(variant, index) in variants" :key="variant.id" @mouseover="updateVariant(index)"
            class="color-circle" :style="{ backgroundColor: variant.color}">
          </div>

main.js

        updateVariant(index) {
            this.selectedVariant = index
        }

3. 将参数中直接引用的固定属性替换为经过计算后得出的计算属性（computed propertity）（注释掉直接返回的参数data()中的image和inventory，在计算属性添加他们）

测试效果

当鼠标移动到绿色上，按照绿色产品信息显示页面

当鼠标移动到蓝色上，按照蓝色产品信息显示页面

3. 在计算属性中添加判断

实现步骤

1. 在main.is文件中添加参数

const app = Vue.createApp({
    data() {
        return {
            cart: 0,
            selectedVariant: 0,
            onSale: false ,
            product: 'Socks',
            brand: 'Vue Mastery',
            url: 'https://www.vuemastery.com/',
            details: ['50% cotton', '30% wool', '20% polyester'],
            variants: [
                { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 },
                { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 }
            ]
        }
    },
    methods: {
        addToCart() {
            this.cart += 1
        },
        updateVariant(index) {
            this.selectedVariant = index
        }
    },
    computed: {
        title() {
            return this.brand + " " + this.product
        },
        image(){
            return this.variants[this.selectedVariant].image
        },
        inventory(){
            return this.variants[this.selectedVariant].quantity
        },
        onSaleFlag(){
            if(this.onSale){
                return this.brand+ " " + this.product +" is on sale"
            }
            return this.brand+ " " + this.product +" is not on sale"
        }
    }
})

2. 修改index.html文件

<h1 v-if="onSale">{{ onSaleFlag }}</h1>

测试效果

当onSale为false时

当onSale为true时

搞定(｡･ω･｡)ﾉ🎉ﾉ🎉ﾉ🎉～～～