• Vue实现仿淘宝商品详情属性选择的功能


    Vue实现仿淘宝商品详情属性选择的功能

    先看下效果图:(同个属性内部单选,属性与属性之间可以多选)

    主要实现过程:

    所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:

    1.  
      attrAndValuees: [
    2.  
      {
    3.  
      'attrId': 1,
    4.  
      'attrName': '味道',
    5.  
      'valuees': [
    6.  
      {
    7.  
      'attrId': 1,
    8.  
      'value': '橘子味'
    9.  
      },
    10.  
      {
    11.  
      'attrId': 2,
    12.  
      'value': '草莓味'
    13.  
      }
    14.  
      ]
    15.  
      },
    16.  
      {
    17.  
      'attrId': 2,
    18.  
      'attrName': '容量',
    19.  
      'valuees': [
    20.  
      {
    21.  
      'attrId': 4,
    22.  
      'value': '100ml'
    23.  
      },
    24.  
      {
    25.  
      'attrId': 6,
    26.  
      'value': '300ml'
    27.  
      }
    28.  
      ]
    29.  
      }]

    相关的Html 代码:

    1.  
      <div class="sortItem" v-for="(item,index) in attrAndValuees" :key="item.attrId">
    2.  
      <span>{{item.attrName}}:</span>
    3.  
      <ul>
    4.  
      <li v-for="(itemm,ind) in item.valuees" :key="itemm.attrId" :class="{'cur':sel[index] == ind}" @click="select(index,ind)" class="hand" >{{itemm.value}}</li>
    5.  
      </ul>
    6.  
      </div>

    实现的原理:新建一个数组,数组的每一项代表一个属性值,由这个数组中的值来改变对应属性的样式

    在data里新增一个数组 :

    1.  
      data () {
    2.  
      return {
    3.  
      sel: []
    4.  
      }
    在methods中新增一个select方法,在点击属性值的时候调用
    1.  
      select: function (index, ind) {
    2.  
      this.sel[index] = ind;
    3.  
      this.$set(this.sel, index, ind)
    4.  
      // this.sel = this.sel.concat([]);
    5.  
       
    6.  
      }

    就以上几个小步骤就可以实现这个效果了,是不是so easy~

    不过这中间需要注意的有几点:

    Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是,对于数组元素的赋值,却没有办法直接监听,因此,在这个项目中我们用了set的方法来给数组赋值或者用concat连接一个空数组来对数组进行重新赋值。

    若你想了解更多关于数组赋值的知识,可访问官网:https://cn.vuejs.org/v2/guide/list.html

  • 相关阅读:
    2017的结束2018的开始
    .NET Core使用swagger进行API接口文档管理
    数据库可扩展设计方案
    容量估算--随时更新
    分库分表设计基础
    利用bucardo搭建PostgreSQL数据库双活
    通过pgAgent实现PostgreSQL上的自动作业
    MySQL主主配置
    Oracle统计信息不准(谓词越界)造成的性能问题
    获取Oracle中SQL语句的执行计划
  • 原文地址:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/9789966.html
Copyright © 2020-2023  润新知