Vue的学习之路十三：品牌列表案例实战
程序员文章站
2022-03-03 10:00:47
...
<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 for="">
Id:
<input type="text" class="form-control" v-model="id" />
</label>
<label for="">
Name:
<input type="text" class="form-control" v-model="name" />
</label>
<!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
<input
type="button"
value="添加"
class="btn btn-primary"
@click="add"
/>
<label for="">
搜索关键字:
<input type="text" class="form-control" v-model="keywords" />
</label>
</div>
</div>
<table class="table table-bordred table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 之前，v-for 中的数据，都是直接从 data 上的 list 中直接渲染过来的 -->
<!-- 现在定义了一个 search 方法，同时把所有的关键字，通过传参的形式，传递给了search 方法 -->
<!-- 在 search 方法内部，通过执行 for 循环，把所有符合搜索关键字的数据，保存到一个新数组中返回 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td v-text="item.id"></td>
<td v-text="item.name"></td>
<td>{{ item.ctime | dateFormat('yyyy-mm-dd') }}</td>
<td><a href="" @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
// 全局的过滤器，进行时间的格式化
Vue.filter('dateFormat', function(dateStr, pattern=""){
// 根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
}else{
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',
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会默认监听到数据的改动，自动把最新的数据，应用到页面上
// 5. 更多的是在进行 VM 中 Model 数据的操作，同时在操作 Mode 数据的时候，指定的业务逻辑操作
if (this.id == '' || this.name == '') return
this.list.push({ id: this.id, name: this.name, ctime: new Date() })
this.id = this.name = ''
},
del(id) {
// 根据id删除数据
// 分析
// 1. 如何根据 id 找到要删除对象的索引
// 2. 如果找到索引了，直接调用 数组的 splice 方法
// this.list.some((item, i) =>{
// if (item.id == id){
// this.list.splice(i, 1)
// // 在数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环
// return true;
// }
// })
var index = this.list.findIndex((item) => {
if (item.id == id) {
return true
}
})
this.list.splice(index, 1)
},
search(keywords) {
// 根据关键字进行搜索
// var newList = []
// this.list.forEach(item => {
// if (item.name.indexOf(keywords) != -1) {
// newList.push(item);
// }
// })
// return newList
// 注意：forEach some filter findIndex 这些都属于数组的新方法，都会对数组中的每一项，进行遍历执行相关的操作
return this.list.filter(item => {
// if(item.name.indexOf(keywords) != -1)
// 注意：ES6中，为字符串提供了一个新方法叫做，String.prototype.includes('要包含的字符串')
// 如果包含，则返回 true，否则返回 false
if(item.name.includes(keywords)){
return item
}
})
},
},
})
// 过滤器的定义语法
// Vue.filter('过滤器的名称', function(){})
// 过滤器中的 function，第一个参数已经被规定死了，永远都是过滤器管道符前面传递过来的数据
// Vue.filter('过滤器的名称', function(data){})
</script>
</body>
知识总结：
- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了
- 案例中的搜索通过将关键字传入search方法
item in search(keywords)，search方法把所有符合关键字的数据保存到一个新数组后返回。return this.list.filter(item => {if(item.name.includes(keywords)){return item}}) - 扫盲：
-
getFullYear()：获取年 -
getMonth() + 1：获取月 -
getDate()：获取日 -
toLowerCase()：转为小写 -
getHours()：获取时 -
getMinutes()：获取分 -
getSeconds()：获取秒 -
${y}-${m}-${d} ${hh}:${mm}:${ss}：格式化字符串 -
findIndex()：用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。 -
splice()：用于插入、删除或替换数组的元素。 -
filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 -
includes()：返回布尔值，表示是否找到了参数字符串。
上一篇： vuewatch监听器
下一篇： Vueå°é²