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值来提升渲染的效率。