【Vue3】官网项目･Vue Mastery Sock-3（事件监听+风格绑定）

我是个球球
141 阅读2分钟

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

事件监听

实现目标

  1. 能够在每单击一次按钮，购物车的值+1。
  1. 鼠标移至

实现步骤

  1. 在index.html文件中添加元素

    1. 在导航栏下添加Cart()
    2. 在色彩选择的div元素中添加鼠标悬停事件updateImage(variant.image)
    3. 添加按钮元素，并添加点击触发事件addToCart

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Vue Mastery</title>
  <!-- Import Styles -->
  <link rel="stylesheet" href="./assets/styles.css" />
  <!-- Import Vue.js -->
  <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <div class="nav-bar"></div>
    <div class="cart">Cart({{ cart }})</div>
    <div class="product-display">
      <div class="product-container">
        <div class="product-image">
          <img v-bind:src="image">
        </div>
        <div class="product-info">
          <h1>{{ product }}</h1>
          <p v-if="inventory > 10">库存充足</p>
          <p v-else-if="inventory <=10 && inventory > 0">库存紧张</p>
          <p v-else>无库存</p>
          <a :href="url">aqin～啊哈啊哈啊哈哈(｡ì _ í｡)</a>
          <ul>
            <li v-for="detail in details">{{ detail }}</li>
          </ul>
          <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}
          </div>
          <button class="button" @click="addToCart">添加进购物车</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Import Js -->
  <script src="./main.js"></script>
  <script>
    const mountedApp = app.mount('#app')
  </script>
</body>

</html>
  1. 修改main.js文件

const app = Vue.createApp({
    data() {
        return {
            cart: 0,
            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', 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
        }
    }
})

测试效果

每点击一次“添加进购物车”，右上角购物车（Cart）里的数字就会+1

鼠标移到“blue”（蓝色）/“green”（绿色）切换颜色

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

风格绑定

实现目标

根据应用程序的数据将类和样式绑定到对应元素上：

  1. 将代表产品颜色的green和blue字段替换成相应颜色的圆圈

实现步骤

将index.html文件中颜色的内容划分元素与特定的样式绑定

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

.color-circle样式（官网预先提供的，无需自行编写）

测试效果

  1. 当显示“无库存”时，“添加购物车”按钮变灰

实现步骤

将index.html文件中颜色的内容划分元素与特定的样式绑定

 <button class="button" :class="{ disabledButton: inventory<=0}" :display="inventory<=0"
            @click="addToCart">添加进购物车</button>

.disabledButton样式（官网预先提供的，无需自行编写）

测试效果

当inventory=99即inventory<=0为false时，库存显示“库存充足”，并且按钮显示正常

当inventory=0即inventory<=0为true时，库存显示“无库存”，按钮按照.disabledButton样式显示

  1. 当显示“无库存”时，商品图片变灰

实现步骤

将index.html文件中颜色的内容划分元素与特定的样式绑定

 <img :class="{ ‘out-of-stock-img': inventory<=0 }" v-bind:src="image">

.out-of-stock-img样式（官网预先提供的，无需自行编写）

测试效果

当inventory=0即inventory<=0为true时，库存显示“无库存”，按钮按照.out-of-stock-img样式显示

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

值得注意的

用“-”连接的style在html的{}中使用时需要加引号，否则无法识别，如下图

avatar
文章
阅读
粉丝