2020-03-25 实习遇见的问题1

1.vue  v-for指令的使用

2.css权重的比较

3.javaScript数组赋值问题

4.disable 绑定问题

5.前后端调接口时，string类型转换为int类型

为实现如上图的效果，点击按钮增加一行控件，使用vue v-for指令，动态渲染

控制台报错Duplicate keys detected: 'xxxx'. This may cause an update error.

具体原因为，key可能重复，每一个动态渲染的列表存在顺序问题，需要绑定全局唯一的key，由于vue的值双向绑定，绑定全局唯一的key后可以迅速确定到修改的地方，而不必全部渲染，只是渲染修改的地方

    <div v-for="(item, index) in upsideList" :key="'upsideList' + index">
      <div style="width: 100%;margin-top: 20px;text-align: left;">
        <el-button type="text" @click="deleteUpside(index)">删除该行</el-button>
        <el-time-picker
          format='HH:mm'
          v-model="item.peakTimeStart"
          style="width:150px;margin-left: 135px;"
          placeholder= "">
        </el-time-picker>
        <div style="display: inline-block;text-align: center;width: 40px;"><span>----</span></div>
        <el-time-picker
          format='HH:mm'
          v-model="item.peakTimeEnd"
          style="width:150px;"
          placeholder= "">
        </el-time-picker>
        <el-time-picker
          format='HH:mm'
          v-model="item.flatPeakTimeStart"
          style="width:150px;margin-left: 44px;"
          placeholder= "">
        </el-time-picker>
        <div style="display: inline-block;text-align: center;width: 40px;"><span>----</span></div>
        <el-time-picker
          format='HH:mm'
          v-model="item.flatPeakTimeEnd"
          style="width:150px;"
          placeholder= "">
        </el-time-picker>
        <el-time-picker
          format='HH:mm'
          v-model="item.slackTimeStart"
          style="width:150px;margin-left: 44px;"
          placeholder= "">
        </el-time-picker>
        <div style="display: inline-block;text-align: center;width: 40px;"><span>----</span></div>
        <el-time-picker
          format='HH:mm'
          v-model="item.slackTimeEnd"
          style="width:150px;"
          placeholder= "">
        </el-time-picker>
      </div>
    </div>

 具体代码部分如上

关于CSS的6大基础选择器

1.id选择器（#box{}）     在结构上设置  id="box"进行设置

2.类选择器（.box{}）     class设置类名

3.属性选择器（a[herf="http://www.xxx.com"]）   

4.伪类和伪对象选择器(:hoevr{}和::after{})

5.标签类型选择器(div{})

6.通配符选择器(*{})      全局所有

优先级顺序从大到小

 

CSS优先级规则1.最近的祖先样式比其他祖先样式优先级高（前提是自己为设置样式）

CSS优先级规则2.直接样式比其他祖先样式优先级高

CSS优先级规则3.内联样式（就是写在标签里面的style）>ID选择器>类选择器=属性选择器=伪类选择器>元素（类型选择器）=伪元素选择器

CSS优先级规则4.计算选择符中ID选择器的个数（a）,计算选择符中类选择器、属性选择器以及伪类选择器个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c），按a、b、c的顺序依次比较大小，大的则优先级高，相等则比较下一个，若最后两个的选择符中的a、b、c都相等则按照就近原则判断

解释一下第四条：我理解为，是两套CSS样式比较的时候，样式优先级已经确定，规则3 则同时比较，类似于个十百千位的比较，先比较最高位，比较出大小，则判断，比较不出则往下比较

JavaScript的赋值问题

今天遇到的问题把数组赋值，把A数组赋值给B数组，发现修改A的同时会影响到B，理解起来类似于C++中的指针，指向相同地址，JavaScript中的数组为引用类型

A: [1,2,3]  B: []

网上找到的解决办法如下

JSON.parse & JSON.stringify

原理：实现对象的深拷贝（利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象）

最后一个vue element 组件  disable值的绑定问题

如果绑定固定的值可以使用disable=“true”

动态 则 ：disable=true

当出现报错为string类型不为bollean类型时 使用第二种解决了，具体原因不太清楚

前后端调接口时 string类型转换为int类型

parseInt()