vue模糊查询计算属性实现版本

<template><div><!-- 输入框 --><input type="text" v-model="keyWord" />   <!-- 循环渲染 --><li v-for="(item, id) in newStarList" :key="id">{{ item.id }} {{ item.name }} - {{ item.age }}</li></div>
</template><script>
export default {data() {return {keyWord: "", // 用户输入值// 明星列表starList: [{ id: "1", name: "周冬雨", age: 18 },{ id: "2", name: "马冬梅", age: 18 },{ id: "3", name: "周杰伦", age: 18 },{ id: "4", name: "郭艾伦", age: 18 },{ id: "5", name: "马艾伦", age: 18 },],};},computed: {newStarList() {// indexof 检测每一次输入的值   返回存在的值return  this.starList.filter(item => item.name.indexOf(this.keyWord) !== -1);},},
};</script><style></style>

vue模糊查询计算属性实现版本相关推荐

Vue 第一天: 计算属性和观察者
计算属性和观察者计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
[vue] watch和计算属性有什么区别？
[vue] watch和计算属性有什么区别? 一个是侦听属性,一个是计算属性 2.一个是为了应对复杂的逻辑计算,一个是对数据的变化作出反应 3.一个是只有当缓存改变时才执行,一个是只要从新渲染就会执行 ...
[vue] 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？
[vue] 在使用计算属性的时,函数名和data数据源中的数据可以同名吗? 莫名其妙的问题.可以同名,但data会覆盖methods.并且本就不该同名,同名说明你命名不规范.然后解释为什么会覆盖,因为 ...
Vue基础之计算属性
Vue基础之计算属性定义: 原理: get函数执行时机: 优势: 备注: Demo: 定义: 要用的属性不存在,要通过已有属性计算得来. 原理: 底层借助了Objcet.defineproperty ...
Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...
面试题！vue中的计算属性、方法、侦听属性
1.计算属性详细的内容可跳转至vue 计算属性可以使用计算属性来代替在表达式中进行的复杂运算,以便于能够更方便的维护与复用逻辑. 计算属性是在选项对象中使用 computed 字段来定义. 特点: ...
003-读书笔记-Vue官网计算属性与监听器
1.计算属性 1-1 计算属性概述计算属性也是 Vue 实例的属性,和 data 方法中返回的对象中的属性是等同的存在.通常来说,计算属性可以简单理解: 计算属性其实就是 Vue 实例的一个属性计 ...
五十八、Vue中的计算属性，方法和侦听器
@Author:Runsen @Date:2020/10/15 本篇是水篇,记录前端的学习,争取早日拿到前端offer 计算属性,方法和侦听器所以,对于任何复杂逻辑,你都应当使用计算属性.(官方原话 ...
vue的computed计算属性学习
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护.这时候需要使用到vue的计算属性computed. 文件目录结构如下:利用vue脚手架创建这 ...

vue模糊查询计算属性实现版本

vue模糊查询计算属性实现版本相关推荐

最新文章

热门文章

vue模糊查询 计算属性实现版本

vue模糊查询 计算属性实现版本相关推荐

最新文章

热门文章

vue模糊查询计算属性实现版本

vue模糊查询计算属性实现版本相关推荐