学到的一些CSS以及v-for使用注意

input输入框

// 控制显示的内容
// 并且设置 只读
<input type="text" :value="item.num" readonly=true>

input{
	outline:none;		// 聚焦时,不要出现边框
	border:none;		// 不要有边框
	background:transparent; // 输入框里为透明色
	// 设置输入框大小
	width:40px;
	height:20px;
	
	// 输入框里的文本居中
	text-align:center;
}

避免 v-for 与 v-if / v-show 一起使用
想要实现相关功能，可以在 computed 中使用过滤

// 不直接使用 List, 使用过滤后的 activeItemList
<li v-for="(item,index) in activeItemList" :key="index">
<script>
    computed:{
        activeItemList(){
            return this.List.filter((item) =>{
                return item.xianshi;
            })
        }
    }
</script>

控制是否选中，以及传入 dom元素

// :checked="isChecked" 	进行绑定控制
// $event.target 			传入dom元素
<input type="checkbox" :checked="isChecked" @click="changeStatus($event.target,item)">
<script>
    changeStatus(e,item){
        if(e.checked === false){
        	......
        }else{
        	......
        }
    }
</script>

关于定位中的居中

    top: 50%;		// 距离顶部的距离是 父级元素高度的一半
    left:50%;		// 距离左侧的距离是 父级元素宽度的一半
    position: absolute;
    
    transform: translate(-50%,-50%);	将元素块的中心放到中心

设定页面背景为视频
设定video视频为背景

box-shadow: 0 0 4px 1px rgba(21, 66, 107, 0.61);
// 第一个值和第二个值分别是 水平和垂直方向偏移量
// 第三个值是阴影模糊程度大小
// 第四个值是阴影扩展半径

background-size:

cover: 保证图片原宽高比，但如果背景和图片的宽高比不一致，则会导致图片显示不完整 (显示部分图片，不平铺)
contain: 保证图片原宽高比，但如果背景和图片的宽高比不一致，则会导致平铺 (显示完整图片，留白部分进行平铺)

// 都是进行居中
background-position: 50% 50%; 
background-position: center; 		// 仅指定一个值时,第二个值默认是 center
background-position: 50%; 
// 位于右下角
background-position: 100% 100%; 

关于定位中的三个属性：fixed，absolute，relative

fixed:将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化。

absolute:元素脱离文档流,不占位置,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。
相对于离自己最近的设置了相对或绝对定位的父元素进行定位
如果没有,则相对于

relative:相对于原来位置移动,元素仍然处在文档流中,不影响其他元素的布局

letter-spacing:2px;		// 控制字符间距
font-family: "Times New Roman", Times, serif;	// 好看的字体
font-weight: // 数值400是normal, 700是bold
pointer-events: none;       // 点击该标签的时候 , 实际点击到的是垫在它下面的标签元素

/* 表示选择 A标签后的所有B标签, A和 B标签必须有相同的父元素。 */
A ~ B{
	...
}

/* 当输入框里有值的时候, 就使它下边的 label 标签 上移 25px */
.wrapper .input-data input:valid ~ label{
	transform:translateY(-25px);
	transition:all 0.3s;
}

选择器 ~ 、+、> 的用法解析

// 配置 scss文件中的变量为全局变量
// vue.config.js
  css:{
    loaderOptions:{
      // 全局配置变量
      sass:{
        data:`@import "@/assets/scss/_variable.scss";`
      }
    }
  }
// 在任意组件使用的时候, $变量名就可以了

关于 v-for 中的 key 有什么用

<li v-for="(item,index) in activeItemList" :key="index">

// data中的数据修改的时候,
// v-for 会根据key值去判断某个值是否修改,如果修改了就重新渲染,不然就复用之前的元素。
// 总结一下,数据改变时,通过key值来提升渲染的效率。

v-for的键值key