Vue 改变下拉框的选择动态渲染其他元素的数据

最新推荐文章于 2025-03-10 09:22:51 发布

YoloAva

最新推荐文章于 2025-03-10 09:22:51 发布

阅读量1.6k

点赞数

分类专栏： Vue 文章标签：其他 vue.js javascript

本文链接：https://blog.csdn.net/weixin_60463255/article/details/120765965

版权

Vue 专栏收录该内容

51 篇文章

订阅专栏

这篇博客展示了如何在Vue.js应用中实现一个小型产品组件，当用户从下拉框选择不同的商品规格时，实时更新显示的价格和餐具份数。通过监听`change`事件来触发`changeSize`方法，更新本地`show`变量，从而改变显示的商品信息。此外，还使用Vuex进行状态管理，获取商品详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景与效果：下拉框的选择的规格不同时，使得价格和餐具份数也改变，如图：

smallProduct.vue>html

<!-- 点击购物车图标 弹出类名为addBox的盒子 -->
<div @click="getAdd(id)" class="cart">
      <img src="../assets/product/购物车.png" alt="" />
</div>

<div class="addBox" id="addBox" v-show="ifShow">
      <div class="infoBox">
        <button @click="getExit()" class="exitBtn">⨉</button>
        <div class="clear">
          <img class="smallPic left" :src="$host + imgsrc" alt="" />
          <div class="left">
            <p v-if="sizeInfo[show]">
              {{ sizeInfo[show].p_name }}
            </p>
            <p v-if="sizeInfo[show]">
              {{ sizeInfo[show].p_describe }}
            </p>
            <p v-if="sizeInfo[show]">
              ¥{{ sizeInfo[show].price }}
            </p>
            <p v-if="sizeInfo[show]">
              {{ sizeInfo[show].tableware }}
            </p>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="sizeBox">
        <span>规格选择</span>
<!-- 改变下拉框的值时触发的函数-->
        <select @change="changeSize($event)">
          <option :value="index" v-for="(item, index) in sizeInfo" :key="item.index">
            {{ sizeInfo[index].weight }}- {{ sizeInfo[index].crowd }}
          </option>
        </select>
      </div>
      <div class="myChoice clear">
        <span @click="getExit()" class="no">取消</span>
        <span @click="addCart()" class="yes">确认</span>
      </div>
    </div>
</div>

smallProduct.vue>js


import { mapState } from "vuex";

 data() {
    return {
      show: 0,
    };
  },
//点击购物车图标时 去store.js发送axios请求 连接node.js、sql查到磅数 人数 餐具数 将查询的结果返回给store.js中名为sizeInfo的数组
    getAdd(id) {
      this.$store.dispatch("sizeInfo", id);
      this.ifShow = true;
    },

//下拉框改变 拿到下拉框的下标 给本地的变量show赋值为当前点击的下标
    changeSize(e) {
      console.log(e.target.value);
      show = e.target.value;
    },

computed: {
    ...mapState(["sizeInfo"]),
  }