【Vue3】官网项目･Vue Mastery Sock-2（条件渲染+列表渲染）条件渲染实现目标根据条件判断显示不同

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

条件渲染

实现目标

根据条件判断显示不同的 HTML 元素

当产品（我们的袜子🧦）有库存时，显示"库存充足"；

当产品快没有库存时（数量在0-10），显示"库存紧张"；

当产品没有库存时，显示"无库存"。

实现步骤

在index.html文件中添加带判断的段落标签

       <p v-if="inventory > 10">库存充足</p>
       <p v-else-if="inventory <=10 && inventory > 0">库存紧张</p>
       <p v-else>无库存</p>

在main.js中添加变量inventory

const app=Vue.createApp({
    data(){
        return{
            product: 'Socks',
            image: './assets/images/socks_green.jpg',
            url: 'https://www.vuemastery.com/',
            inventory: 0
        }
    }
})

测试效果

当将变量inventory设为99，符合inventory > 10，于是显示“库存充足”

当将变量inventory设为8，符合inventory <=10 && inventory > 0，于是显示“库存紧张”

当将变量inventory设为0，符合其他情况，于是显示“无库存”

搞定♪───Ｏ（≧∇≦）Ｏ────♪撒花🎉🎉🎉～～～

下面介绍下如何实现列表渲染->

列表渲染

实现目标

将数组数据显示为列表形式

示例中的数组数据格式有两种：

{String, String, String}

[Map{Integer, String}, Map{Integer, String}]

实现步骤

在index.html文件中添加带for循环的无序列表元素/内容划分元素
1. details对应的是真实变量名，detail代表数组循环过程中每次循环取到的那个字符串（了解Java的同学可以参考foreach循环）
2. 同样，variants对应的是真实变量名，variant代表数组循环过程中每次循环取到的那个map，variant.color则代表每次循环取到的这个map中的color

<ul>
    <li v-for="detail in details">{{ detail }}</li>
</ul>
<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>

2. 在main.js中添加变量details和variants

const app=Vue.createApp({
    data(){
        return{
            product: 'Socks',
            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'},
                { id: 2235, color: 'blue'}
            ]
        }
    }
})

测试效果

又搞定一小节！･゜ﾟ･:.｡..｡.:･'(ﾟ▽ﾟ)'･:.｡. .｡.:*･゜ﾟ･撒花🎉🎉🎉～～～