Vue-BootStrap(品牌案例)_列表过滤
程序员文章站
2022-03-03 10:12:41
...
<script src="VueJs/vue.js"></script>
<link href="VueJs/bootstrap.css" rel="stylesheet">
</link>
<script>
onload = function() {
var Vm = new Vue({
el: "#app",
data: {
NewsList: [{
id: 1,
name: "宝马",
ctime: new Date().toLocaleString()
}, {
id: 2,
name: "奔驰",
ctime: new Date().toLocaleString()
}],
id: '',
name: '',
keyWorlds: ''
},
methods: {
add() {
//执行添加操作
//在Vue中，已经实现了数据的双向绑定，每当我们更改了data中的值，Vue会默认监听到数据的改动，并异步的更新视图。
//这样对于开发人员而言大大的减少了Dom元素的操作，更多的专注于数据的处理和事件绑定的业务逻辑处理上。
//0.先判断用户是否输入有效值
if (this.$data.id == "" || this.name == "") {
alert("请输入有效数据！");
return false;
}
//1.获取用户输入的数据，构建一个对象
var car = {
id: Vm.$data.id,
name: this.name,
ctime: new Date().toLocaleString()
};
//2.执行数组的变异方法添加该对象即可(Data发生改动，Vue自动更新视图)
this.NewsList.push(car); //在数组最后添加数据
//3.清空文本框(因为文本框实现了V-Model双向数据绑定，所以只需要设置data中id，name的值=''即可
this.id = this.name = "";
},
//通过方法小括号的参数传递进行传值参数
remove(id) {
//获取当前行数据的ID
// Vue.delete(this.NewsList, id - 1); //使用Vue内置函数删除
//2.使用数组的some方法，遍历该数组，一旦符合某个条件终止循环，返回true终止循环
// this.NewsList.some((item, i) => {
// if (item.id == id) {
// //找到了调用数组的splice方法删除该组数据，并返回true
// this.NewsList.splice(i, 1);
// return true;//return true终止循环
// }
// })
//通过数组的新方法findIndex方法
var index = this.NewsList.findIndex(item => {
if (item.id == id) {
return true; //如果该项符合条件，return true返回该项索引并终止循环
}
})
this.NewsList.splice(index, 1);
},
//string.indexOf('')=0 字符串对空字符的索引为0而并非是-1
find(kw) {
var newlist = [];
//方式01 数组的some方法
// this.NewsList.some((item, i) => {
// if (item.name.indexOf(kw) != -1) {
// newlist.push(item); //不return true终止遍历
// }
// })
// return newlist
// //方式02 数组的forEach遍历
// this.NewsList.forEach(item => {
// if (item.name.indexOf(kw) != -1) {
// newlist.push(item);
// }
// })
// return newlist;
//方式03 数组的过滤方法，返回新数组
var newlist02 = this.NewsList.filter(item => {
if (item.name.includes(kw)) { //string.includes(str) 判断字符串中是否包含某个字符串，如果包含返回为true
return item; //如果包含返回当前项
}
});
return newlist02;
}
},
})
}
</script>
</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">
<!--form-inline放在一行-->
<label>
ID：
<input type="text" name="Uid" class="form-control" v-model="id"></input>
</label>
<label>
Name:
<input type="text" name="Uname" class="form-control" v-model="name"></input>
<!--form-control表单控件的意思-->
</label>
<!--@click="add()"在Vue中加小括号和不加小括号的区别在于加了括号可以传参数-->
<button class="btn btn-primary" @click="add">添加</button>
<label>
搜索关键字：
<input class="form-control" type="text" v-model="keyWorlds"></input>
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped text-centers">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!--Search(KeyWorlds)方法将数组根据关键字进行过滤筛选，返回新数组进行循环加载 -->
<tr v-for="item in find(keyWorlds)" :key="item.id">
<td v-text="item.id"></td>
<td v-text="item.name"></td>
<td v-text="item.ctime"></td>
<td><a href="" @click.prevent="remove(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
</body>