1 Vue中导入外部样式
不污染其他组件的样式导入方法如下,使用import方法导入类似于全局导入,其他组件会被污染。
/* 导入外部样式 */ <style src='test.css' scoped></style> /* 当前组件的样式 */ <style scoped> .my_style{ width:100%; } </style>
2 ElementUI中显示省略号
el-table上使用tooltip-effect属性,el-table-column上使用show-overflow-tooltip
<el-table tooltip-effect='light'> <el-table-column show-overflow-tooltip></el-table-column> </el-table>
3 UlementUI中格式化日期
<el-date-picker v-model="value" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
4 vue中常用的鼠标事件
事件 | 说明 | 事件 | 说明 |
---|---|---|---|
mouseenter(常用) | 进入 | mouseleave(常用) | 离开 |
mousedown | 按下 | mouseup | 抬起 |
mousemove | 移动 | mouseout | 移出 |
mouseover | 在上面 | dblclick(常用) | 双击 |
5 判断数据
// 判断undefined if(typeof(val) == 'undefined'){ alert('undefined'); } // 判断数组 if( arr instanceof Array){ alert("Array"); } if(Array.isArray(arr)){ alert("Array"); }
6 Vue中dom树加载完成后执行
this.$nextTick(function(){ alert("dom 已加载完成!"); })
7 集合运算
let arr1=[1,2,3]; let arr2=[2,3,4]; let set1 = new Set(arr1); let set2 = new Set(arr2); // 并集, "..."表示展开运算符 let union = new Set([...arr1, ...arr2]); // 交集 let inter = new Set(arr1.filter(x=>set2.has(x))); // 差集 let diff = new Set(arr1.filter(x=>!set2.has(x)));
8 获取对象中的数据
// 获取对象中的keys let keysArr = Object.keys(obj); // 获取对象中的value let valArr = Object.values(obj); // 为对象添加属性 let obj = new Objec(); obj['name']=‘张三'; let attrAge = 'age'; obj[attrAge]=10;