table 表格_[1, 4, -5, 10].find((n) => n > 1)的结果为-CSDN博客

本文链接：https://blog.csdn.net/qq_39743131/article/details/79520035

1.table表格常见的使用属性为:border-collapse:collapse;

2.confirm("显示的文字“）点击确认为true,取消为false，

3.数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined

[1, 4, -5, 10].find((n) => n < 0)  
// -5  
[1, 5, 10, 15].find(function(value, index, arr) {  
return value > 9;  
}) // 10  

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[javascript]view plainc
[1, 5, 10, 15].findIndex(function(value, index, arr) {  
return value > 9;  
}) // 2  

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。
另外，这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足。

[javascript]view plaincopy
[NaN].indexOf(NaN)  
// -1  
[NaN].findIndex(y => Object.is(NaN, y))  
// 0  

上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

语法

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  table { 
 
 
  border-collapse: 
  collapse; 
 
 
  text-align: 
  center; 
 
 
  font-size: 
  16px; 
 
 
  margin: 
  20px 
  auto; 
 
 
  width: 
  800px; 
 
 
 

   } 
 
 
  table th { 
 
 
  background-color: 
  #0094ff; 
 
 
  color: 
  #fff; 
 
 
  padding: 
  5px; 
 
 
  font-size: 
  16px 
 


   } 
 
 
  table td { 
 
 
  padding: 
  5px; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  < 
  script 
  src= 
  "vue221.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  id= 
  "app" 
  > 
 

   输入编号： 
  < 
  input 
  type= 
  "text" 
  v-model= 
  "ppid" 
  > 
 

   输入名称： 
  < 
  input 
  type= 
  "text" 
  v-model= 
  "ppname" 
  > 
 
 
  < 
  input 
  type= 
  "button" 
  value= 
  "添加数据" @ 
  click= 
  "addList" 
  > 
 
 
  < 
  table 
  border= 
  "1" 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  th 
  >编号 
  </ 
  th 
  > 
 
 
  < 
  th 
  >名称 
  </ 
  th 
  > 
 
 
  < 
  th 
  >创建时间 
  </ 
  th 
  > 
 
 
  < 
  th 
  >操作 
  </ 
  th 
  > 
 
 
  </ 
  tr 
  > 
 
 
  < 
  tr 
  v-for= 
  "item in pinpailist" 
  > 
 
 
  < 
  td 
  >{{item.id}} 
  </ 
  td 
  > 
 
 
  < 
  td 
  >{{item.name}} 
  </ 
  td 
  > 
 
 
  < 
  td 
  >{{item.ctime}} 
  </ 
  td 
  > 
 
 
  < 
  td @ 
  click= 
  "deldata(item.id)" 
  >< 
  a 
  href= 
  "javascript:void(0)" 
  >删除 
  </ 
  a 
  ></ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  </ 
  table 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  script 
  > 
 
 
  new 
  Vue({ 
 
 
  el: 
  '#app', 
 
 
  data:{ 
 
 
  pinpailist:[ 
 

   { 
  id: 
  1, 
  name: 
  "宝马", 
  ctime: 
  new 
  Date}, 
 

   { 
  id: 
  2, 
  name: 
  "奔驰", 
  ctime: 
  new 
  Date}, 
 

   { 
  id: 
  3, 
  name: 
  "大众", 
  ctime: 
  new 
  Date}, 
 

   { 
  id: 
  4, 
  name: 
  "悍马", 
  ctime: 
  new 
  Date} 
 

   ], 
 
 
  ppid: 
  "", 
 
 
  ppname: 
  "", 
 
 
  isShow: 
  false 
 

   }, 
 
 
  methods:{ 
 
 
  addList: 
  function(){ 
 
 
  var 
  newlist={ 
  id: 
  this. 
  ppid, 
  name: 
  this. 
  ppname, 
  ctime: 
  new 
  Date} 
 
 
  this. 
  pinpailist. 
  push( 
  newlist) 
 

   }, 
 
 
  deldata: 
  function( 
  id){ 
 
 
  if(! 
  confirm( 
  "是否确认删除此数据")){ 
 
 
  return 
  false; 
 

   } 
 
 
  var 
  index = 
  this. 
  pinpailist. 
  findIndex( 
  function( 
  item1){ 
 
 
  return 
  item1. 
  id== 
  id; 
 

   }); 
 
 
  this. 
  pinpailist. 
  splice( 
  index, 
  1); 
 

   } 
 

   } 
 

   }) 
 


 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 