vue 학습 둘째 날
머리말
학습관 2일차 프로젝트 실습
1. 프로젝트 사전 분석
기능: 프로젝트는 추가, 삭제, 수정 및 확인의 기본 기능을 실현해야 합니다.
기본 구조 구축:
-
부트스트랩 소개
-
뷰 소개
2. 프로젝트 건설
1. 정적 페이지 구축
<div class="panel panel-primary" id="app">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body">
<form action="" method="" class="form-inline" role="">
<div class="form-group">
<label class="" for="">ID</label>
<input v-model="idInput" type="email" class="form-control" id="" placeholder="输入id">
</div>
<div class="form-group">
<label class="" for="">name</label>
<input v-model="nameInput" type="email" class="form-control" id="" placeholder="输入名称">
</div>
<button @click="addCar" type="button" class="btn btn-primary">添加</button>
<div class="form-group">
<label class="" for="">关键字</label>
<input v-model="searchInput" type="text" class="form-control" id="" placeholder="输入关键字" @keyup.enter="searchCar">
</div>
</form>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>时间</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in searchCar()">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.data|dateFormat('YYYY-MM-DD')}}</td>
<td><button type="button" class="btn btn-danger" @click="deleteCar(item.id)">删除</button><button type="button" class="btn btn-primary" @click="modify(index)">修改</button></td>
</tr>
</tbody>
</table>
</div>
2. 뷰 부분
// 过滤器
Vue.filter('dateFormat', function (time, format) {
let y = time.getFullYear();
let m = (time.getMonth() + 1).toString().padStart(2, '0');
let d = time.getDate().toString().padStart(2, '0');
return format.replace('YYYY',y).replace("MM",m).replace('DD',d)
})
//创建vue对象
let vm=new Vue({
el:'#app',
data:{
idInput:'',
nameInput:'',
searchInput:'',
//初始的内容列表
list:[
{
id:1,
name:'宝马',
data:new Date()
},
{
id:2,
name:'凯迪拉克',
data:new Date()
},
{
id:3,
name:'五菱宏光',
data:new Date()
}
]
},
methods:{
//添加功能
addCar(){
if (this.list.some(item=>item.id==this.idInput)) {
confirm('该id已存在')
}else {
this.list.push({
id:this.idInput,
name:this.nameInput,
data: new Date()
})
}
},
//删除功能
deleteCar(id){
if (confirm('确定要删除吗?')) {
this.list.forEach((item,index) => {
if (item.id==id) {
this.list.splice(index,1)
}
});
}
},
//查找功能,上面遍历的就是此函数的返回值
searchCar(){
return this.list.filter(item=>item.name.includes(this.searchInput))
},
//修改名称
modify(index){
let newName=prompt('请输入新的名称')
if (newName!=null) {
this.list[index].name=newName
}
}
}
})