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
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
- [1, 5, 10, 15].findIndex(function(value, index, arr) {
- return value > 9;
- }) // 2
另外,这两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足。
- [NaN].indexOf(NaN)
- // -1
- [NaN].findIndex(y => Object.is(NaN, y))
- // 0
上面代码中,indexOf方法无法识别数组的NaN成员,但是findIndex方法可以借助Object.is方法做到。
4.
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
>