前端之vue的计算属性

vue 的计算属性

Vue 的计算属性仅在其依赖项之一发生更改时重新运行。
vue计算属性使用方法如下

<template>
{{ 方法名 }}
</template>

<script>
export default{
computed:{
	方法名(){/* return 内容 */},	
}
</script>

filter(func)过滤数组

filter用于对数组进行过滤，创建一个符合条件的新数组。不改变原有数组。
func的返回值是true才会被加入新数组.

filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
// 等价于
filter(function(element) { /* ... */ })
filter(function(element, index) { /* ... */ })

index 是正在被处理的数组元素的下标。
使用:

数组.filter(item=>item.done)
等价于
数组.filter(function(item){
	return item.done;
})

item是被数组中正在被处理的元素，
item.done 为 true，或是不空字符串会被添加到新数组中。

aria-labelledby 与 id

aria-labelledby=“描述” 用于描述元素

<h2 id="list-summary">{{ listSummary }}</h2>
<ul aria-labelledby="list-summary" class="stack-large">
  <li v-for="item in ToDoItems" :key="item.id">
    <to-do-item
      :lable="item.label"
      :done="item.done"
      :id="item.id"
    ></to-do-item>
  </li>
</ul>

id是定义目标元素，而aria-labeledby是用来做无障碍的。
设置 aria-labelledby 的值为某个元素的 id 。那么屏幕阅读器就可以读取它的值。

find(func)

find()⽅法⽤于查找数组中符合条件的第⼀个元素，如果没有符合条件的元素，则返回undefined。
find() 对于空数组，函数是不会执⾏的。不改变原数组。
使用:

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

下一节：前端之vue的条件渲染