vue中添加与删除关键字搜索功能
更新时间：2019年10月12日 13:16:37 作者：YH丶浩
这篇文章主要介绍了vue中添加与删除，关键字搜索功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
具体代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model='id'>
</label>
<label for="">Name:
<input type="text" v-model='name' @keyup.enter='add'>
</label>
<input type="button" value="添加" @click='addBtnFlag && add()'>
搜索：
<input type="text" v-model='keywords' id="search" v-focus v-color>
</div>
<!-- 注意： v-for 循环的时候 ， key 属性只能使用 number获取string -->
<!-- 注意：key 在使用的时候，必须使 v-bind 属性绑定的形式 指定 key 的值 -->
<!--在组件中，使用v-for循环的时候，或者在一些特殊的情况中，如果 v-for 有问题 ，必须 在使用 v-for 的同时 ，指定 唯一的字符串/数字 类型 :key 值 -->
<!-- v-for 中的数据，都是直接从 data 上的 list 中直接渲染过来的 -->
<!-- 自定义一个 search 方法，同时 ，把所有的关键词，通过传参的形式，传递给了 search 方法 -->
<!-- 在 search 方法内部，通过 执行 for 循环，把所有符合 搜索关键字的数据，保存到 一个新数组中 返回 -->
<p v-for='item in search(keywords)' :key="item.id">
<input type="checkbox">
{{item.id}}---- {{item.name}}
<!-- <a @click='shift(index)'>删除</a> -->
-----------------<a @click.prevent="del(item.id)">删除</a>
</p>
</div>
<script>
//使用 Vue.directive() 定义全局的指令 v-focus
//其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀，
//但是：再调用的时候，必须 在指令名称前面 加上 v- 前缀来进行调用
//参数2：是一个对象，这个对象身上，有一些指令相关的函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
bind: function (el) {
//每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
//注意：在每个 函数中，第一个参数，永远是 el ， 表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的的JS对象
//在元素 刚绑定了指令的时候，还没有 插入到 DOM 中去，这时候，调用focus 方法没有作用
//因为，一个元素，只有插入DOM之后，才能获取焦点
el.focus()
},
inserted: function (el) {
//inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发一次】
el.focus()
},
updated: function (el) {
//当VNode更新的时候 会执行updated 可能会触发多次
},
})
Vue.directive('color',{
bind: function (el) {
el.style.color = 'red'
}
})
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
keywords: '',//关键词
addBtnFlag:true,
list: [
{ id: 1, name: '奥迪' },
{ id: 2, name: '宝马' },
{ id: 3, name: '奔驰' },
{ id: 4, name: '玛莎拉蒂' },
{ id: 5, name: '保时捷' },
{ id: 6, name: '五菱宏光' }
]
},
methods: {
add() {
// this.list.push({ id: this.id, name: this.name })
if( this.id == ''){
this.addBtnFlag=false
}else{
var car = { id: this.id, name: this.name }
this.list.push(car)
this.id = this.name = ''
}
},
del(id) {
//根据ID删除
// this.list.some((item,i)=>{
// if(item.id == id){
// this.list.splice(i,1)
// 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
//contain
if (item.name.includes(keywords)) {
return true
}
})
// return newList
}
}
})
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的vue中添加与删除关键字搜索功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
本篇文章主要介绍了Vue2.0 多 Tab切换组件的封装实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
今天小编就为大家分享一篇vue prop属性传值与传引用示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue-cli3设置代理无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Vue路由钩子之afterEach beforeEach的区别详解
这篇文章主要介绍了Vue路由钩子 afterEach beforeEach区别 ,vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结。需要的朋友可以参考下2018-07-07
这篇文章主要介绍了Vue.js 父子组件通讯开发实例的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
使用element-ui,el-row中的el-col数据为空页面布局变乱问题
这篇文章主要介绍了使用element-ui,el-row中的el-col数据为空页面布局变乱问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue三元运算之多重条件判断方式(多个枚举值转译)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了VUE项目中调用高德地图的全流程讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vuex中使用modules时遇到的坑及问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
今天小编就为大家分享一篇解决vue动态为数据添加新属性遇到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论