Vue实现简单的品牌列表功能（Vue）
程序员文章站
2022-03-03 10:01:05
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品列表案例</title>
<script src="vue.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
ID：<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:<input type="text" class="form-control" v-model="name">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!--list是data中的数组，item是在每一趟循环里面被赋予的值.-->
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime}}</td>
<td>
<!--a标签默认是会刷新页面的，所以为了保证能够阻止刷新页面的操作得使用.prevent阻止其默认行为-->
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1, name:'奔驰', ctime:new Date()},
{id:2, name:'宝马', ctime:new Date()}
]
},
methods:{
add(){//添加的方法
//分析：
//1.获取到id和name,直接从data上面获取
//2.组织出一个对象
//3.把这个对象，调用数组的相关方法，添加到当前data上的list中
//4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上
var car={id:this.id, name:this.name, ctime:new Date()}
this.list.push(car)
this.id=this.name=''
},
del(id){
//分析：
//1.因为是假数据，所以就不能执行SQL语句，那么如何根据ID，找到要删除这一项的索引呢？
this.list.some((item,i)=>{
if(item.id==id){//找到了item对应的索引i，将其返回
//在数组的some方法中，如果return true,就会立即终止这个数组的后续循环
this.list.splice(i,1)//删除索引值为i的，删除1个，不往后删除（i从0开始）
return true;//终止
}
})
}
}
});
</script>
</body>
</html>
下一篇： Vue --- 侦听器详解