Neoo1984

Neoo1984 查看完整档案

杭州编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

Neoo1984 赞了回答 · 8月5日

解决input type=file上传文件有大小限制吗上传23k的文件413 request too large

应该是nginx配置问题, 可以找谁有ngixn配置权限的修改一下就好了

关注 3 回答 2

Neoo1984 提出了问题 · 8月5日

解决input type=file上传文件有大小限制吗上传23k的文件413 request too large

image.png

<td><input type="file" name="file" id="file" required="required"></td>
                                    <td><input type="submit" class="btn btn-table" value="上传" id="upload" style="margin-right: 20px"></td>

上传文件是有默认大小限制吗,
如果大小限制怎么改大一点,不至于几十k的都上传失败

关注 3 回答 2

Neoo1984 提出了问题 · 6月8日

解决bat脚本获取日期,格式为20200608185309

bat脚本,获取当前时间格式为20200608185309 要怎么实现

关注 2 回答 1

Neoo1984 提出了问题 · 5月20日

前端ajax请求中413,是否能直接让后端把get换成post

如题,get上带了一大串,导致413了,(我这里没有用到nginx),想直接把get换成post 可行吗?会带来其他什么问题吗?

我这里的请求是 在接口上带上从svg获取的一些节点

关注 2 回答 1

Neoo1984 提出了问题 · 1月17日

解决js能否读取txt内容,处理文本内容后再输出为txt格式(或者其他便于人看的文件格式)

需求是,用js读取txt文本,把txt内容按需求整理,再输出txt,或者其他格式,只要方便人阅读。
用js可以处理吗

关注 3 回答 2

Neoo1984 提出了问题 · 1月9日

解决这个js库生成乐高积木的,导入时报了同源错误,是我导入的方式不对吗

关注 2 回答 1

Neoo1984 赞了回答 · 1月7日

解决在v-show中,如果初始数据可能是为空的,导致渲染失败则么解决

要么初始化 curContent 为数组
要么使用 v-if 判断 curContent

关注 2 回答 2

Neoo1984 提出了问题 · 1月7日

解决在v-show中,如果初始数据可能是为空的,导致渲染失败则么解决

<div v-show="showType===1" class="show-content">{{curContent[10]}}</div>

showType === 1的时候是绑定在按钮,点击匹配之后再去显示,
但是模板加载的时候因为 curContent为空,
v-show应该是加载dom只是display:none掉了,所以加载dom就错了,
但是怎么解决这种数据为空时的渲染呢

关注 2 回答 2

Neoo1984 收藏了文章 · 1月6日

JS数组基本操作——数组遍历到底有多少种方式?

对于"数组遍历"这个问题,其实答案很宽泛,关键在于你能不能列举出一定数量的方法以及描述它们之间的区别。本文即介绍一下数组的基本遍历操作和高阶函数。

一、数组基本遍历

本部分介绍4种最常用的遍历方式。

1.for...in

for...in其实是对象的遍历方式,并不是数组专有,使用for...in将循环遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性,其遍历顺序与Object.keys()函数取到的列表一致。

该方法会遍历数组中非数字下标的元素,会忽略空元素:

let list = [7, 5, 2, 3]
list[10] = 1
list['a'] = 1
console.log(JSON.stringify(Object.keys(list)))

for (let key in list) {
  console.log(key, list[key])
}

输出:

> ["0","1","2","3","10","a"]
> 0, 7
> 1, 5
> 2, 2
> 3, 3
> 10, 1
> a, 1

这个方法遍历数组是最坑的,它通常表现为有序,但是因为它是按照对象的枚举顺序来遍历的,也就是规范没有规定顺序的,所以具体实现是由着浏览器来的。MDN文档里也明确建议“不要依赖其遍历顺序”:
image.png

2.for...of

这个方法用于可迭代对象的迭代,用来遍历数组是有序的,并且迭代的是数组的值。该方法不会遍历非数字下标的元素,同时不会忽略数组的空元素:

let list = [7, 5, 2, 3]
list[5] = 4
list[4] = 5
list[10] = 1
// 此时下标6、7、8、9为空元素
list['a'] = 'a'

for (let value of list) {
  console.log(value)
}

输出:

> 7
> 5
> 2
> 3
> 5
> 4
>   // 遍历空元素
>  // 遍历空元素
>  // 遍历空元素
>  // 遍历空元素
> 1

3.取数组长度进行遍历

该方法和方法2比较像,是有序的,不会忽略空元素。

let list = ['a', 'b', 'c', 'd']
list[4] = 'e'
list[10] = 'z'
list['a'] = 0

for (let idx = 0; idx < list.length; idx++) {
  console.log(idx, list[idx])
}

输出:

> 0, a
> 1, b
> 2, c
> 3, d
> 4, e
> 5, //空元素
> 6, 
> 7, 
> 8, 
> 9, 
> 10, z

4.forEach遍历

forEach是数组的一个高阶函数,用法如下:

arr.forEach(callback[, thisArg])

参数说明:

callback
为数组中每个元素执行的函数,该函数接收三个参数:

  • currentValue

数组中正在处理的当前元素。

  • index 可选

数组中正在处理的当前元素的索引。

  • array 可选

forEach() 方法正在操作的数组。

thisArg可选
可选参数。当执行回调函数时用作 this 的值(参考对象)。

forEach遍历数组会按照数组下标升序遍历,并且会忽略空元素:

let list = ['a', 'b', 'c', 'd']
list[4] = 'e'
list[10] = 'z'
list['a'] = 0

list.forEach((value, key, list) => {
  console.log(key, value)
})

输出:

> 0, a
> 1, b
> 2, c
> 3, d
> 4, e
> 10, z

有一个很容易忽略的细节,我们都应该尽可能地避免在遍历中取增删数组的元素,否则会出现一些意外的情况,并且不同的遍历方法还会有不同的表现。

for...of和forEach遍历中删除元素

比如for...of遍历中删除元素:

let list = ['a', 'b', 'c', 'd']

for (let item of list) {
  if (item === 'a') {
    list.splice(0, 1)
  }
  console.log(item)
}

输出:

> a
> c
> d

forEach遍历中删除元素:

let list = ['a', 'b', 'c', 'd']

list.forEach((item, idx) => {
  if (item === 'a') {
    list.splice(0, 1)
  }
  console.log(item)
})

输出:

> a
> c
> d

可以看到,二者表现一致,遍历到a的时候,把a删除,则b会被跳过,增加元素则略为不同。

for…of和forEach遍历中增加元素

for...of遍历中增加元素:

let list = ['a', 'b', 'c', 'd']
for (let item of list) {
  if (item === 'a') {
    list.splice(1, 0, 'e')
  }
  console.log(item)
}

输出:

> a
> e
> b
> c
> d

forEach遍历中增加元素:

let list = ['a', 'b', 'c', 'd']

list.forEach((item, idx) => {
  if (item === 'a') {
    list.splice(1, 0, 'e')
  }
  console.log(item)
})

输出:

> a
> e
> b
> c

咦,少了个'd'! 可以看到,其实forEach遍历次数在一开始就已确定,所以最后的'd'没有输出出来,这是forEach和for遍历数组的一个区别,另一个重要区别是forEach不可用break, continue, return等中断循环,而for则可以。

总之,在遍历数组过程中,对数组的操作要非常小心,这一点python、js很相似,因为两门语言中,对象/字典和数组都是引用,都为可变对象。

二、利用高阶函数遍历数组

上面介绍的4种算是比较标准的遍历方式,不过JS中数组还有很多的高阶函数,这些函数其实都可以达到遍历数组的目的,只不过每个函数的应用场景不同,下面简单介绍一下。

1. map

map() 方法参数与forEach完全相同,二者区别仅仅在于map会将回调函数的返回值收集起来产生一个新数组。
比如将数组中每个元素的2倍输出为一个新数组:

let list = [1, 2, 3, 4]
let result = list.map((value, idx) => value * 2)
console.log(result) // 输出[2,4,6,8]

2.filter

filter() 参数与forEach完全一致,不过它的callback函数应该返回一个真值或假值。filter() 方法创建一个新数组, 新数组包含所有使得callback返回值为真值(Truthy,与true有区别)的元素。
比如过滤数组中的偶数:

let list = [1, 2, 3, 4]
let result = list.filter((value, idx) => value % 2 === 0)
console.log(result) // 输出[2,4]

3. find/findIndex

find() 方法返回数组中使callback返回值为Truthy的第一个元素的值,没有则返回undefined。使用非常简单,比如找出数组中第一个偶数:

let list = ['1', '2', '3', '4']
let result = list.find(value => value % 2 === 0)
console.log(result) // 输出 2

findIndex()方法与find方法很类似,只不过findIndex返回使callback返回值为Truthy的第一个元素的索引,没有符合元素则返回-1。比如找出数组中第一个偶数的下标:

let list = [1, 2, 3, 4]
let result = list.findIndex(value => value % 2 === 0)
console.log(result) // 输出 1

4.every/some

两个函数接收参数都与以上函数相同,返回都是布尔值。every用于判断是否数组中每一项都使得callback返回值为Truthy,some用于判断是否至少存在一项使得callback元素返回值为Truthy。

let list = [1, 2, 3, 4]
// 判断数组中是否每个元素小于10
let result = list.every(value => {
  return value < 10
})
console.log(result) // 输出true

// 判断是否每个元素大于2
result = list.every(value => {
  return value > 2
})
console.log(result) // 输出false

// 判断是数组中否存在1
result = list.some(value => {
  return value === 1
})
console.log(result) // 输出true

// 判断数组中是否存在大于10的数
result = list.some(value => {
  return value > 10
})
console.log(result) // 输出false

5.reduce/reduceRight 累加器

参数与其它函数有所不同:
callback
执行数组中每个值的函数,包含四个参数:

  • accumulator

累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。

  • currentValue

数组中正在处理的元素。

  • currentIndex 可选

数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则为1。

  • array 可选

调用reduce()的数组

initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值,而reduceRight只是遍历顺序相反而已。

比如很常见的一个需求是,把一个如下结构的list变成一个树形结构,使用forEach和reduce可以轻松实现。
列表结构:

let list = [
  {
    id: 1,
    parentId: ''
  },
  {
      id: 2,
      parentId: ''
  },
  {
      id: 3,
      parentId: 1
  },
  {
      id: 4,
      parentId: 2,
  },
  {
      id: 5,
    parentId: 3
  },
  {
      id: 6,
    parentId: 3
  }
]

树形结构:

      
[
    {
        "id":1,
        "parentId":"",
        "children":[
            {
                "id":3,
                "parentId":1,
                "children":[
                    {
                        "id":5,
                        "parentId":3
                    },
                    {
                        "id":6,
                        "parentId":3
                    }
                ]
            }
        ]
    },
    {
        "id":2,
        "parentId":"",
        "children":[
            {
                "id":4,
                "parentId":2
            }
        ]
    }
]

利用reduce和forEach实现list转为树形结构:

function listToTree(srcList) {
  let result = []
  // reduce收集所有节点信息存放在对象中,可以用forEach改写,不过代码会多几行
  let nodeInfo = list.reduce((data, node) => (data[node.id] = node, data), {})

 // forEach给所有元素找妈妈
  srcList.forEach(node => {
    if (!node.parentId) {
      result.push(node)
      return
    }
    let parent = nodeInfo[node.parentId]
    parent.children = parent.children || []
    parent.children.push(node)
  })
  return result
}

以上即为本文围绕数组遍历介绍的数组基本操作。这些高阶函数其实都可以用于数组遍历(如果想强行遍历的话,比如some的callback恒返回false),不过实际使用中应该根据不同的需求选用不同的方法。

至此,面试中遇到“数组遍历有多少种方法?”这种问题,你可以回答“10种以上”了,毕竟,本文介绍了12种...


最后,JS其实是一门特别愚蠢的语言,有时候你交给它的事情,它不会办不说,竟然还会骂人!不信?控制台输入下面的算式试试:

(![]+{})[-~!+[]^-~[]]+([]+{})[-~!![]]

Just for fun. 别太认真~,~


本文原创,首发于我的个人网站:http://wintc.top/site/article?postId=8,转载请注明出处。

查看原文

Neoo1984 赞了文章 · 1月6日

JS数组基本操作——数组遍历到底有多少种方式?

对于"数组遍历"这个问题,其实答案很宽泛,关键在于你能不能列举出一定数量的方法以及描述它们之间的区别。本文即介绍一下数组的基本遍历操作和高阶函数。

一、数组基本遍历

本部分介绍4种最常用的遍历方式。

1.for...in

for...in其实是对象的遍历方式,并不是数组专有,使用for...in将循环遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性,其遍历顺序与Object.keys()函数取到的列表一致。

该方法会遍历数组中非数字下标的元素,会忽略空元素:

let list = [7, 5, 2, 3]
list[10] = 1
list['a'] = 1
console.log(JSON.stringify(Object.keys(list)))

for (let key in list) {
  console.log(key, list[key])
}

输出:

> ["0","1","2","3","10","a"]
> 0, 7
> 1, 5
> 2, 2
> 3, 3
> 10, 1
> a, 1

这个方法遍历数组是最坑的,它通常表现为有序,但是因为它是按照对象的枚举顺序来遍历的,也就是规范没有规定顺序的,所以具体实现是由着浏览器来的。MDN文档里也明确建议“不要依赖其遍历顺序”:
image.png

2.for...of

这个方法用于可迭代对象的迭代,用来遍历数组是有序的,并且迭代的是数组的值。该方法不会遍历非数字下标的元素,同时不会忽略数组的空元素:

let list = [7, 5, 2, 3]
list[5] = 4
list[4] = 5
list[10] = 1
// 此时下标6、7、8、9为空元素
list['a'] = 'a'

for (let value of list) {
  console.log(value)
}

输出:

> 7
> 5
> 2
> 3
> 5
> 4
>   // 遍历空元素
>  // 遍历空元素
>  // 遍历空元素
>  // 遍历空元素
> 1

3.取数组长度进行遍历

该方法和方法2比较像,是有序的,不会忽略空元素。

let list = ['a', 'b', 'c', 'd']
list[4] = 'e'
list[10] = 'z'
list['a'] = 0

for (let idx = 0; idx < list.length; idx++) {
  console.log(idx, list[idx])
}

输出:

> 0, a
> 1, b
> 2, c
> 3, d
> 4, e
> 5, //空元素
> 6, 
> 7, 
> 8, 
> 9, 
> 10, z

4.forEach遍历

forEach是数组的一个高阶函数,用法如下:

arr.forEach(callback[, thisArg])

参数说明:

callback
为数组中每个元素执行的函数,该函数接收三个参数:

  • currentValue

数组中正在处理的当前元素。

  • index 可选

数组中正在处理的当前元素的索引。

  • array 可选

forEach() 方法正在操作的数组。

thisArg可选
可选参数。当执行回调函数时用作 this 的值(参考对象)。

forEach遍历数组会按照数组下标升序遍历,并且会忽略空元素:

let list = ['a', 'b', 'c', 'd']
list[4] = 'e'
list[10] = 'z'
list['a'] = 0

list.forEach((value, key, list) => {
  console.log(key, value)
})

输出:

> 0, a
> 1, b
> 2, c
> 3, d
> 4, e
> 10, z

有一个很容易忽略的细节,我们都应该尽可能地避免在遍历中取增删数组的元素,否则会出现一些意外的情况,并且不同的遍历方法还会有不同的表现。

for...of和forEach遍历中删除元素

比如for...of遍历中删除元素:

let list = ['a', 'b', 'c', 'd']

for (let item of list) {
  if (item === 'a') {
    list.splice(0, 1)
  }
  console.log(item)
}

输出:

> a
> c
> d

forEach遍历中删除元素:

let list = ['a', 'b', 'c', 'd']

list.forEach((item, idx) => {
  if (item === 'a') {
    list.splice(0, 1)
  }
  console.log(item)
})

输出:

> a
> c
> d

可以看到,二者表现一致,遍历到a的时候,把a删除,则b会被跳过,增加元素则略为不同。

for…of和forEach遍历中增加元素

for...of遍历中增加元素:

let list = ['a', 'b', 'c', 'd']
for (let item of list) {
  if (item === 'a') {
    list.splice(1, 0, 'e')
  }
  console.log(item)
}

输出:

> a
> e
> b
> c
> d

forEach遍历中增加元素:

let list = ['a', 'b', 'c', 'd']

list.forEach((item, idx) => {
  if (item === 'a') {
    list.splice(1, 0, 'e')
  }
  console.log(item)
})

输出:

> a
> e
> b
> c

咦,少了个'd'! 可以看到,其实forEach遍历次数在一开始就已确定,所以最后的'd'没有输出出来,这是forEach和for遍历数组的一个区别,另一个重要区别是forEach不可用break, continue, return等中断循环,而for则可以。

总之,在遍历数组过程中,对数组的操作要非常小心,这一点python、js很相似,因为两门语言中,对象/字典和数组都是引用,都为可变对象。

二、利用高阶函数遍历数组

上面介绍的4种算是比较标准的遍历方式,不过JS中数组还有很多的高阶函数,这些函数其实都可以达到遍历数组的目的,只不过每个函数的应用场景不同,下面简单介绍一下。

1. map

map() 方法参数与forEach完全相同,二者区别仅仅在于map会将回调函数的返回值收集起来产生一个新数组。
比如将数组中每个元素的2倍输出为一个新数组:

let list = [1, 2, 3, 4]
let result = list.map((value, idx) => value * 2)
console.log(result) // 输出[2,4,6,8]

2.filter

filter() 参数与forEach完全一致,不过它的callback函数应该返回一个真值或假值。filter() 方法创建一个新数组, 新数组包含所有使得callback返回值为真值(Truthy,与true有区别)的元素。
比如过滤数组中的偶数:

let list = [1, 2, 3, 4]
let result = list.filter((value, idx) => value % 2 === 0)
console.log(result) // 输出[2,4]

3. find/findIndex

find() 方法返回数组中使callback返回值为Truthy的第一个元素的值,没有则返回undefined。使用非常简单,比如找出数组中第一个偶数:

let list = ['1', '2', '3', '4']
let result = list.find(value => value % 2 === 0)
console.log(result) // 输出 2

findIndex()方法与find方法很类似,只不过findIndex返回使callback返回值为Truthy的第一个元素的索引,没有符合元素则返回-1。比如找出数组中第一个偶数的下标:

let list = [1, 2, 3, 4]
let result = list.findIndex(value => value % 2 === 0)
console.log(result) // 输出 1

4.every/some

两个函数接收参数都与以上函数相同,返回都是布尔值。every用于判断是否数组中每一项都使得callback返回值为Truthy,some用于判断是否至少存在一项使得callback元素返回值为Truthy。

let list = [1, 2, 3, 4]
// 判断数组中是否每个元素小于10
let result = list.every(value => {
  return value < 10
})
console.log(result) // 输出true

// 判断是否每个元素大于2
result = list.every(value => {
  return value > 2
})
console.log(result) // 输出false

// 判断是数组中否存在1
result = list.some(value => {
  return value === 1
})
console.log(result) // 输出true

// 判断数组中是否存在大于10的数
result = list.some(value => {
  return value > 10
})
console.log(result) // 输出false

5.reduce/reduceRight 累加器

参数与其它函数有所不同:
callback
执行数组中每个值的函数,包含四个参数:

  • accumulator

累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。

  • currentValue

数组中正在处理的元素。

  • currentIndex 可选

数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则为1。

  • array 可选

调用reduce()的数组

initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值,而reduceRight只是遍历顺序相反而已。

比如很常见的一个需求是,把一个如下结构的list变成一个树形结构,使用forEach和reduce可以轻松实现。
列表结构:

let list = [
  {
    id: 1,
    parentId: ''
  },
  {
      id: 2,
      parentId: ''
  },
  {
      id: 3,
      parentId: 1
  },
  {
      id: 4,
      parentId: 2,
  },
  {
      id: 5,
    parentId: 3
  },
  {
      id: 6,
    parentId: 3
  }
]

树形结构:

      
[
    {
        "id":1,
        "parentId":"",
        "children":[
            {
                "id":3,
                "parentId":1,
                "children":[
                    {
                        "id":5,
                        "parentId":3
                    },
                    {
                        "id":6,
                        "parentId":3
                    }
                ]
            }
        ]
    },
    {
        "id":2,
        "parentId":"",
        "children":[
            {
                "id":4,
                "parentId":2
            }
        ]
    }
]

利用reduce和forEach实现list转为树形结构:

function listToTree(srcList) {
  let result = []
  // reduce收集所有节点信息存放在对象中,可以用forEach改写,不过代码会多几行
  let nodeInfo = list.reduce((data, node) => (data[node.id] = node, data), {})

 // forEach给所有元素找妈妈
  srcList.forEach(node => {
    if (!node.parentId) {
      result.push(node)
      return
    }
    let parent = nodeInfo[node.parentId]
    parent.children = parent.children || []
    parent.children.push(node)
  })
  return result
}

以上即为本文围绕数组遍历介绍的数组基本操作。这些高阶函数其实都可以用于数组遍历(如果想强行遍历的话,比如some的callback恒返回false),不过实际使用中应该根据不同的需求选用不同的方法。

至此,面试中遇到“数组遍历有多少种方法?”这种问题,你可以回答“10种以上”了,毕竟,本文介绍了12种...


最后,JS其实是一门特别愚蠢的语言,有时候你交给它的事情,它不会办不说,竟然还会骂人!不信?控制台输入下面的算式试试:

(![]+{})[-~!+[]^-~[]]+([]+{})[-~!![]]

Just for fun. 别太认真~,~


本文原创,首发于我的个人网站:http://wintc.top/site/article?postId=8,转载请注明出处。

查看原文

赞 25 收藏 16 评论 0

Neoo1984 赞了回答 · 1月6日

解决这个for循环有什么问题,webstorm老师提示 dosent loop

for-of你定义的index直接就是每一项的值了,不是for-in循环

关注 3 回答 4

Neoo1984 提出了问题 · 1月6日

解决这个for循环有什么问题,webstorm老师提示 dosent loop

这是this.showSocData
image.png

for (let index of this.showSocData){

        this.showSocData[index] = this.showSocData[index].value.replace('%','')*1
        return this.showSocData;
      }

关注 3 回答 4

Neoo1984 提出了问题 · 1月6日

解决js数组,把多个数组的比如1号位,都push到一个新数组

arr1 = [],
arr2 = [],
//more arr

怎么把arr 的比如一号位置 都放到一个新的newArr,

关注 2 回答 1

Neoo1984 提出了问题 · 1月6日

解决vue中,点击不同的按钮显示不同的内容,一个按钮对应一条内容,显示一条内容时其他内容隐藏,这怎么实现

`<div class="show-soc" v-if="showSoc">SOC:{{showSocData}}</div>`

<div class="show-Bms" v-if="showBms">SOC:{{showBmsData}}</div>

`handleShowSoc() {
    this.showSoc = true;
    this.showSocData = 11;
  },`
  
  

showBms的同时让soc不显示,但是不止要显示隐藏这两个,难道显示一个的时候设置其他的 显示都false吗,this.showxxx = false,this.showxxx = false...
到底该怎么处理


修改

image.png

按钮
`<div v-for="(item,index) in batteryDataList" :key="index">

 <a-button @click="handleShowBattery(index)" type="primary" :size="size" block>{{item.btn}}</a-button>
          </div>`

`batteryDataList:[{

      content:'',
      btn:'厂家版本'
    },{
      content:'',
      btn:'BMS编码'
    },{
        content:'111',
        btn:'电池编码'
      },
      {
        content:[],
        btn:'SOC'
      },
      {
        content:'222',
        btn:'组电状态'
      },
      {
        content:'222',
        btn:'单体电压'
      },],`

这个是一个content中的数组showSocData
image.png

要在class="no1" class="no5" no9 这三个div中显示
`<div class="no1 window">

              <span class="order">1</span>
              <img v-show="data1[12].value =='0(空位)' " data-original="../../assets/battery/cell_empty.png">
            </div>
            <div class="no5 window">
              <span class="order">5</span>
              <img v-show="data5[12].value =='0(空位)' " data-original="../../assets/battery/cell_empty.png">
            </div>
            <div class="no9 window">
              <span class="order">9</span>
              <img v-show="data9[12].value =='0(空位)' " data-original="../../assets/battery/cell_empty.png">
            </div>`

div排列顺序如图,想这样命名class为了排序看得清楚
no1中是 showSocData[0] ,no9中是showSocData[8] 这样

关注 5 回答 5

Neoo1984 提出了问题 · 1月5日

解决获取当前元素的id,让{{}}中的内容根据id变化

<div id="showSoc11" class="show-soc">SOC:{{showSoc}}</div>
<div id="showSoc12" class="show-soc">SOC:{{showSoc}}</div>

现有大量重复的html,渲染不同的{{showSOC}},我想根据获取到的id showSocxx的后两位数字 比如11,来确定{{showSOc}}的内容
1.如果要按照这种想法,该怎么获取这个id呢
2.这种重复的在html中的渲染,有更好的处理方式吗
想实现这样:
image.png
点击左侧的按钮,右侧分别显示对应序号的内容

更改问题


<div v-for="(item,index) in batteryDataList" :key="index">
                <a-button @click="handleShowBattery(index)" type="primary" :size="size" block>{{item.btn}}</a-button>
batteryDataList:[{
          content:'',
          btn:'厂家版本'
        },{
          content:'',
          btn:'BMS编码'
        },{
            content:'111',
            btn:'电池编码'
          },
          {
            content:'222',
            btn:'SOC'
          },
          {
            content:'222',
            btn:'组电状态'
          },
          {
            content:'222',
            btn:'单体电压'
          },],
handleShowBattery(index){
    this.curContent = this.batteryDataList[index].content
},           

想实现的就是左侧按钮对应显示右边方框里显示的内容content,但是content是一个数组,数组的每一位分别对应一个方框,比如,soc按钮的content 是一个数组soc[方框1soc,方框2soc...]这样,这样的话我不知道怎样一一对应

关注 2 回答 1

Neoo1984 提出了问题 · 1月3日

在html中有大量重复渲染的部分,怎样简洁地实现,比如我现在的代码中

`
<div class="no4 window">

                <span class="order">4</span>
                <img v-if="data4[12].value =='0(空位)' " data-original="../../assets/battery/cell_empty.png">
                <img v-else-if="80< showSoc4 && showSoc4 <95 " data-original="../../assets/battery/cell_high_power.png">
                <img v-else-if="50<= showSoc4 && showSoc4 <= 80 " data-original="../../assets/battery/cell_medium2_power.png">
                <img v-else-if="20< showSoc4 && showSoc4 < 50 " data-original="../../assets/battery/cell_medium1_power.png">
                <img v-else-if="data4[53].value != '%' && 0<=showSoc4 && showSoc4 <= 20 " data-original="../../assets/battery/low_energy.png">
                <img v-else-if="showSoc4 >=95 "  data-original="../../assets/battery/cell_full_power.png">
                <a-checkbox value="no4"   class="fix-checkbox"></a-checkbox>
              </div>
              <div class="no8 window">
                <span class="order">8</span>
                <img v-if="data8[12].value =='0(空位)' " data-original="../../assets/battery/cell_empty.png">
                <img v-else-if="80< showSoc8 && showSoc8 <95 " data-original="../../assets/battery/cell_high_power.png">
                <img v-else-if="50<= showSoc8 && showSoc8 <= 80 " data-original="../../assets/battery/cell_medium2_power.png">
                <img v-else-if="20< showSoc8 && showSoc8 < 50 " data-original="../../assets/battery/cell_medium1_power.png">
                <img v-else-if="data8[53].value != '%' && 0<=showSoc8 && showSoc8 <= 20 " data-original="../../assets/battery/low_energy.png">
                <img v-else-if="showSoc8 >=95 "  data-original="../../assets/battery/cell_full_power.png">
              </div>`
              

这种 .window 可能要重复渲染的,要在js中的话怎么实现呢

关注 4 回答 4

Neoo1984 赞了回答 · 1月3日

解决bootstrap-table请求总数和实际显示条数不一样

这个就是后端的问题了

关注 3 回答 2

Neoo1984 收藏了文章 · 1月3日

一个合格的前端都应该阅读这些文章

前言

的确,有些标题党了。起因是微信群里,有哥们问我,你是怎么学习前端的呢?能不能共享一下学习方法。一句话也挺触动我的,我真的不算是什么大佬,对于学习前端知识,我也不能说是掌握了什么捷径。当然,我个人的学习方法这篇文章已经在写了,预计这周末会在我个人公众号发布。而在此之前,我想展(gong)示(xiang)一下,我平时浏览各个技术网站,所记录下来的文章。如果你能做到每日消化一篇,或许,你只要一年,就能拿下各个大厂 offer!

不由感慨,好文太多!吾等岂能浪费,还整日怨天尤人。

个人好文收藏

收藏截止时间:2019-07-24 11:50:49

typescript

CSS

前端工程(架构、软实力)

React 技术栈

webpack/babel

Test

JavaScript

Node

Flutter

Http

浏览器

面试

数据结构与算法

其他

结束语

以上包括我已读还未移至已读的记录中(主要是由于感觉还需再度)。所有文章,我都会好好学习,没办法,毕竟比较菜。还有太多需要学习。

欢迎关注我个人微信公众号:全栈前端精选

我会每日推荐各种精选好文,以及每日一道面试题讲解。(今日才开启这个计划)

查看原文

Neoo1984 赞了回答 · 1月3日

解决js百分数比较大小

80 < '55' < 90

= false < 90
= true

正确的姿势:
80 < '55'*1 && 55*1 < 95

记得比较前把String变成Number

关注 3 回答 2

Neoo1984 提出了问题 · 1月3日

解决js百分数比较大小

console.log(this.data11[53].value)   //55%
console.log(this.data11[53].value.replace("%",'')< 56);//true
console.log(80<this.data11[53].value.replace("%",'')<95 );//true

这里为什么都是 true啊,
js中两个百分数比较大小的话到底要怎么做

关注 3 回答 2