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中添加与删除关键字搜索功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
