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

简单解释一下这个模块主要想做的就是通过计算将原始固定的属性值换为值

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

[外链图片转存失败,源站可能有防盗链机制,建议保存图片并直接上传(img-hi3maZzM-1658392650135)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee79f62c474f476d99a5b791acabd514~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

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文件

[外链图片转存失败，源站可能有防盗链机制，建议保存图片并直接上传(img-8RSMCcpM-1658392650136)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6592f6e3c55a45959d11ee80b11211b0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

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

[外链图片转存失败，源站可能有防盗链机制，建议保存图片并直接上传(img-d6CxBRul-1658392650136)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51af78fc4ae5467382554aadbe07e4ea~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

这对我来说有点复杂，所以让我们先分析一下实现这个想法 ->

我们需要根据用户鼠标移动的位置(绿圈/蓝圈，这里引入序号0和1分别代表绿色和蓝色)来判断用户想要获得哪种颜色的产品信息，然后根据获得的产品信息显示产品图片，判断产品库存，然后判断显示库存充足/库存紧张/无库存

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

[外链图片转存失败，源站可能有防盗链机制，建议保存图片并直接上传(img-DAsXD6TJ-1658392650136)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a437703cb6944be8838e7e9d0155be28~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

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

[外链图片转存失败，源站可能有防盗链机制，建议保存图片并直接上传(img-ZkZ9HZvn-1658392650137)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90eb72c4ac354893a5651c3cb2a04fa1~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

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

main.js

[外链图片转存失败，源站可能有防盗链机制，建议保存图片并直接上传(img-YglT8F0k-1658392650137)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/521c19fe44534de8ae383e8460432aab~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

 updateVariant(index) {             this.selectedVariant = index         }  

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

[外链图片转存失败，源站可能有防盗链机制，建议保存图片并直接上传(img-5yAtEYPU-1658392650137)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09d1a7bccff444298f86ed2060f94c25~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

当鼠标移动到绿色时，根据绿色产品信息显示页面

[外链图片转存失败,源站可能有防盗链机制,建议保存图片并直接上传(img-4Msetnqa-1658392650137)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e16563b19a2c40fba5e645c5c23c524a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

当鼠标移动到蓝色时，根据蓝色产品信息显示页面

[外链图片转存失败，源站可能有防盗链机制，建议保存图片并直接上传(img-KFjLNxeF-1658392650138)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/300a4680d4c0444199ccbb24c7e918a9~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.mage)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vaWlh2NH-1658392650138)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa295c641d9a45fe9b47c3dda8a1783f~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

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文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qWQnR1lg-1658392650138)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da4a5e48c9c5482abeb33697d767e652~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

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

当onSale为false时

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xhjEQrjN-1658392650139)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc09997f640546f5b1120198d057243b~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

当onSale为true时

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EAEouDJi-1658392650139)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec87128b95774172a46c0f451cab9621~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

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