首先需要准備好vue.js包
<!
DOCTYPE
html
>
<
html
>
<
head
>
<
meta
charset=
"utf-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<
title
>demo01
</
title
>
<
link
rel=
"stylesheet"
href=
"css/bootstrap.min.css"
/>
<
script
src=
"./lib/vue.js"
>
<
/
script
>
<
style
>
.course{
width:
1200px;
margin:
50px
auto;
border:
1px
solid
#ccc;
border-radius:
5px;
}
.course
.editPanel{
border-bottom:
1px
solid
#ccc;
padding:
20px;
}
.course
.editPanel
label{
margin-right:
20px;
}
.course
.editPanel
input{
width:
150px;
padding:
5px
10px;
font-size:
14px;
border-radius:
4px;
outline:
none;
border:
1px
solid
#aaa;
}
.course
.editPanel
input[
type=
button]{
width:
70px;
background-color:
rgb(
50,
120,
180);
padding:
5px
20px;
letter-spacing:
5px;
color:
#eee;
}
.course
.editPanel
.search{
margin-left:
50px;
}
.course
.list{
padding:
20px;
}
.course
.list
table{
width:
100%;
border:
1px
solid
#ccc;
border-collapse:
collapse;
}
.course
.list
table
tr
td,
.course
.list
table
tr
th{
padding:
10px;
border:
1px
solid
#ccc;
text-align:
center;
font-size:
14px;
line-height:
14px;
}
.course
.list
table
tr
td
a{
color:
#369;
text-decoration:
none;
}
.course
.list
table
.firstCol{
width:
50px;
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"course"
id=
"course"
>
<
div
class=
"editPanel"
>
<
label
for=
""
>序號：
<
input
type=
"text"
v-model=
"id"
></
label
> //v-model指令可以實現表單元素和model中數據
的雙向數據綁定
<
label
for=
""
>課程：
<
input
type=
"text"
v-model=
"cName"
></
label
>
<
label
for=
""
>教師：
<
input
type=
"text"
v-model=
"teacher"
@keyup.enter=
"add"
></
label
>
<
input
type=
"button"
value=
"添加"
@click=
"add"
>
<
lable
for=
""
class=
"search"
>搜索：
<
input
type=
"text"
v-model=
"keyword"
@keyup=
"search(keyword)"
></
lable
>
</
div
>
<
div
class=
"list"
>
<
table
>
<
thread
>
<
tr
>
<
th
class=
"firstCol"
>序號
</
th
>
<
th
>課程
</
th
>
<
th
>教師
</
th
>
<
th
>時間
</
th
>
<
th
>操作
</
th
>
</
tr
>
</
thread
>
<
tbody
>
<
tr
v-for=
"item in search(keyword)"
:key=
"item.id"
> //v-for循環的時候，key屬性只能使用number
獲取string
//注意：key在使用的時候，必須使用v-bind屬性綁定的形式，指定key的值。
//加上一個key（能夠保證數據的唯一性）
<
td
>{{item.id}}
</
td
>
<
td
>{{item.cName}}
</
td
>
<
td
>{{item.teacher}}
</
td
>
<
td
>{{item.time | timeFormat('cn')}}
</
td
>
<
td
><
a
href=
""
@click.prevent=
"del(item.id)
"
>刪除
</
a
></
td
> //需要根據id傳參
</
tr
>
</
tbody
>
</
table
>
</
div
>
</
div
>
</
body
>
<
script
>
var
vm=
new
Vue({
el:
'#course',
data:{
id:
'',
cName:
'',
teacher:
'',
time:
new
Date(),
keyword:
'',
list:[
{
'id'
:
1,
'cName'
:
'語文',
'teacher'
:
'小明',
'time'
:
'2020-1-3'},
{
'id'
:
2,
'cName'
:
'數學',
'teacher'
:
'小紅',
'time'
:
'2020-2-3'},
{
'id'
:
3,
'cName'
:
'英語',
'teacher'
:
'小華',
'time'
:
'2020-3-3'}
]
},
methods:{
// 增加一條記錄
add
:
function(){
if(
this.
id.
length>
0&&
this.
cName.
length>
0&&
this.
teacher.
length>
0){ //確保都有數據
this.
list.
push({
'id'
:
this.
id,
'cName'
:
this.
cName,
'teacher'
:
this.
teacher,
'time'
:
this.
time})
}
else{
alert(
'請填入完整的課程信息！');
}
},
// 刪除一條記錄
del
:
function(
id){ // 根據id刪除數據
for(
var
i=
0;
i<
this.
list.
length;
i++){
if(
this.
list[
i].
id==
id){
this.
list.
splice(
i,
1); //從索引為i的位置開始刪除，刪1個
}
}
},
search
:
function(
word){
var
result=[];
for(
var
i=
0;
i<
this.
list.
length;
i++){
if(
this.
list[
i].
cName.
toLowerCase().
indexOf(
word.
toLowerCase())>-
1){ //toLowerCase()方法用於把字符串轉換為小寫
result.
push(
this.
list[
i]);
}
}
return
result;
},
},
filters:{
timeFormat
:
function(
dateStr,
pattern){
var
date=
new
Date(
dateStr);
var
year=
date.
getFullYear();
var
month=
date.
getMonth()+
1;
var
day=
date.
getDate();
var
result=
'';
if(
pattern){
switch(
pattern.
toLowerCase()){
case
'cn':
result=
year+
'年'+
month+
'月'+
day+
'日';
break;
case
'en':
result=
year+
'-'+
month+
'-'+
day;
break;
default:
result=
year+
'.'+
month+
'.'+
day;
break;
}
}
else{
result=
year+
'.'+
month+
'.'+
day;
}
return
result;
}
}
})
<
/
script
>
</
html
>
