Vue中数组的基本操作:Find操作

 时间:2026-04-23 16:23:05

1、在Vue实例的Data中初始化一个数组:persons,数组的元素是对象,每个对象包含name,age,height属性。

Vue中数组的基本操作:Find操作

2、通过Find操作,来查找age>100的person。

将原数组persons显示的页面中。

Vue中数组的基本操作:Find操作

3、添加一个按钮绑定点击事件。

<button @click="findArr">年龄>100</button>

Vue中数组的基本操作:Find操作

4、在methods中定义findArr函数,用来执行find操作。

并将结果打印出来。

Vue中数组的基本操作:Find操作

5、点击【运行】-【运行到浏览器】,选择自己的浏览器运行。

Vue中数组的基本操作:Find操作

6、打开浏览器后,点击f12打开调试工具,查看控制台。

点击【年龄>100】 按钮,查看控制台输出。

Vue中数组的基本操作:Find操作

7、从输出可以看到,只返回了第一条记录,另外 { "name": "刘备", "age": 101, "height": 1.71 }没有返回,所以find操作只返回第一条符合条件的元素。

另外:最好将此操作,定义在计算属性中,如下图。

Vue中数组的基本操作:Find操作

8、然后在数据显示在页面中。

年龄大于100的人是:{{ageMoreThan100}}

Vue中数组的基本操作:Find操作

  • Windows server 2008如何创建WINS静态映射记录
  • div+css如何布局
  • IntelliJ IDEA如何从VCS获取代码
  • js如何定义textarea的高度
  • 如何使用python批量新增工作簿?
  • 热门搜索
    关于诚信的手抄报 中国梦的手抄报 讲普通话写规范字手抄报 关于秋天的手抄报 防疫手抄报简单又精美 安全知识手抄报内容 庆祝六一手抄报 关于安全的手抄报图片 抗击疫情的手抄报 开学了手抄报内容