博客网

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: 设置弹性盒子伸缩基准值