v-show指令是操作css样式display属性，用来控制DOM元素显示和隐藏。 v-if指令是对页面上DOM节点的添加与删除 从效果上来看是一样，都是设置DOM元素的展示隐藏。但是它们的性质是不一样，一个是设置display属性值，一个是操作DOM元素添加和删除。它们之间可以同时使用是没有冲突。 <!-- v-if指令 --> <div v-if="status"></div> <!-- v-if指令 --> <div v-show="show"></div> <!-- v-if和v-show指令 --> <div v-if="status" v-show="show"></div>
1、提示：指令v-if和v-for不能用在同一个标签上，否则性能会消耗很大。 2、原因：如果写在同一标签，会先对所有数据进行以下操作，就是一边循环一边执行v-if，循环中多次对 DOM 元素进行添加或删除，这样会造成大量的性能消耗 3、优先级：v-for 优先级 高于v-if <div v-for="(item, index) in dataList" :key="index"> <div v-if="item.status"> {{item.name}} </div> </div> 4、解决办法 1.不要把v-for和v-if 写在同一个标签上，而是新建div引入v-for包裹v-if 2.使用v-show代替v-if
1、方法一（常规for循环） 两个数组进行for循环嵌套，然后判断元素是否相等，如果相等就push到新的数组中。 let arr1 = [1, 2, 3, 4, 5] let arr2 = [4, 5, 6, 7, 8] let intersection = [] for (let i = 0; i < arr1.length; i ) { for (let j = 0; j < arr2.length; j ) { if (arr1[i] === arr2[j]) { intersection.push(arr1[i]) } } } console.log(intersection) // [4, 5] 方法二（使用ES6的filter函数和includes函数） let arr1 = [1, 2, 3, 4, 5] let arr2 = [4, 5, 6, 7, 8] console.log(arr1.filter((item) => arr2.includes(item))) // [4, 5] 方法三（reduce） 先合并和排序，然后通过reduce参数进行对比，判断上一个和当前元素相同时push到新的数组中。 let arr1 = [1, 2, 3, 4, 5] let arr2 = [4, 5, 6, 7, 8] let arr = arr1.concat(arr2).sort() let intersection = [] arr.reduce((pre, now) => { if (pre === now) { intersection.push(now) } return now }) console.log(intersection) // [4, 5]
方法一（利用解构赋值...和Set的唯一性） 先将两个数组合并再通过Set()去重 let arr1 = [1, 2, 3, 4, 5] let arr2 = [4, 5, 6, 7, 8] let result = [...new Set(arr1.concat(arr2))] console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8] 方法二（reduce） 先合并和排序，然后通过reduce参数进行对比，判断上一个和当前元素不相同时，就push到新的数组中。 let arr1 = [1, 2, 3, 4, 5] let arr2 = [4, 5, 6, 7, 8] let arr = [...arr1, ...arr2].sort() let result = [arr[0]] arr.reduce((pre, now) => { if (pre !== now) { result.push(now) } return now }) console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8] 方法三（转json对象） 将数组转成JSON对象，数组每个元素都作为对象的键和值，如果元素相同，则对象键和值会覆盖，达到去重效果，接着再使用Object.values提取对象的值返回一个新的数组。 let arr1 = [1, 2, 3, 4, 5] let arr2 = [4, 5, 6, 7, 8] let obj = {} arr1.forEach((item) => { obj[item] = item }) arr2.forEach((item) => { obj[item] = item }) let result = Object.values(obj) console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8]
// 实例化对象 const speakMsg = new SpeechSynthesisUtterance() // 设置在说话时将合成的文本内容。 speakMsg.text = speech; // 设置话语的语言。 例如：“zh-cn”表示中文 speakMsg.lang = "zh-CN"; // 设置将在其中发言的音量。区间范围是0到1，默认是1 speakMsg.volume = 1; // 设置说话的速度。默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍 speakMsg.rate = 1; // 设置说话的音调(音高)。范围从0（最小）到2（最大）。默认值为1 speakMsg.pitch = 10; //音高:0-1 // 方法调用 window.speechSynthesis.speak(speakMsg)
通过扩展运算符，在对象最后一个命名参数以...为前缀，则它将成为一个由剩余参数组成的对象，所以将要删除的属性结构出来，剩余的通过...带上新的参数名，则新的参数名就是新的对象 // 删除user对象下的qq和电话属性字段 let user = { name: 'shenghao', age: 13, sex: '男', province: '广东省', cidy: '广州市', address: '天河区', qq: '365121369', phone: '15000000000', } let { qq, phone, ...info } = user 通过对象解构后info值是： { "name": "shenghao", "age": 13, "sex": "男", "province": "广东省", "cidy": "广州市", "address": "天河区" }
用户在登录时，数据传输过程中如果密码使用的是明文，那么在报文被拦截之后是可以直接获取传输的数据，所以明文密码在传输时被拦截是十分危险，因此在传输密码前前端需要对密码进行加密。 前端使用MD5进行加密如下： 1、使用npm安装md5 npm install js-md5 2、引入md5 import md5 from 'js-md5' 3、使用md5进行加密，加密方式有以下三种 // 密码 let password="123456" // 盐值 let solt = 'yanzhi' // 普通的md5加密 md5(password) // 双重md5加密 md5(md5(password)) // md5加盐solt加密算法 md5(solt password) md5(password solt) md5(solt password solt) md5(md5(password) solt) md5(solt md5(password))
match用来在一个字符串中查找匹配的子串，并返回一个包含匹配结果的数组。match()方法可以接收一个参数，这个参数可以是正则表达式对象或者一个字符串。 1、匹配括号中的内容，包含括号 var str = 'HTML(小括号)的全称为[中括号]超文本【中文中括号】标记语言，是一种{花括号}标记语言。' var reg1 = /\((. ?)\)/g // () 小括号 var reg2 = /\[(. ?)\]/g // [] 中括号 var reg3 = /\【(. ?)\】/g // 【】中文大括号 var reg4 = /\{(. ?)\}/g // {} 花括号 str.match(reg1) // ['(小括号)'] str.match(reg2) // ['[中括号]'] str.match(reg3) // ['{花括号}'] str.match(reg4) // ['【中文中括号】'] 2、匹配括号中的内容，不包含括号 var str = 'HTML(小括号)的全称为[中括号]超文本【中文中括号】标记语言，是一种{花括号}标记语言。' var reg1 = /(?<=\()(. ?)(?=\))/g // () 小括号 var reg2 = /(?<=\[)(. ?)(?=\])/g // [] 中括号 var reg3 = /((?<=\【)(. ?)(?=\】))/g // 【】中文大括号 var reg4 = /(?<=\{)(. ?)(?=\})/g // {} 花括号，大括号 str.match(reg1) // ['小括号'] str.match(reg2) // ['中括号'] str.match(reg3) // ['中文中括号'] str.match(reg4) // ['花括号']
边框宽度 /*边框的宽度*/ border-width:3px; /*上边框的宽度*/ border-top-width:3px; /*右边框的宽度*/ border-right-width:3px; /*下边框的宽度*/ border-bottom-width:3px; /*左边框的宽度*/ border-left-width :3px; 边框颜色 /*边框的颜色*/ border-color: #eee; /*上边框的颜色*/ border-top-color: #eee; /*右边框的颜色*/ border-right-color: #eee; /*下边框的颜色*/ border-bottom-color: #eee; /*左边框的颜色*/ border-left-color: #eee; 边框样式 /*边框的样式*/ border-style: solid; /*上边框的样式*/ border-top-style: solid; /*右边框的样式*/ border-right-style: solid; /*下边框的样式*/ border-bottom-style: solid; /*左边框的样式*/ border-left-style: solid;
display: 指定 HTML 元素的盒子类型 flex-direction: 指定弹性盒子中子元素的排列方式 flex-wrap: 设置当弹性盒子的子元素超出父容器时是否换行 flex-flow: flex-direction 和 flex-wrap 两个属性的简写 justify-content: 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式 align-items: 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式 align-content: 修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐 order: 设置弹性盒子中子元素的排列顺序 align-self: 在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性 flex: 设置弹性盒子中子元素如何分配空间 flex-grow: 设置弹性盒子的扩展比率 flex-shrink: 设置弹性盒子的收缩比率 flex-basis: 设置弹性盒子伸缩基准值
