计算属性

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

实现目标

1. 标题拼接

2. 颜色区分

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

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

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
        }
    }
}) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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)]

{{ title }}
 
1

测试效果

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

2. 颜色区分

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

我们需要根据用户鼠标移动的位置（绿圈圈/蓝圈圈，这里引入了序号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 }
            ] 
1
2
3
4

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)]

 

          
 
1
2
3

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
        } 
1
2
3

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.image)]

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

实现步骤

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"
        }
    }
}) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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)]

{{ onSaleFlag }}
 
1

测试效果

当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)]

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