前端之vue的条件渲染

条件渲染 v-if

v-if 是真正的条件渲染，根据表达式的真假切换元素的显示状态。
在切换时元素及它的数据绑定和事件监听会被销毁并重建（对组件亦是如此）
v-if
v-else-if
v-if

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

splice()

splice() 方法用于添加或删除数组中的元素。
用拼接进行删除。

对原数组进行删除或添加：
删除:

原数组.splice(开始删除的下标,删除的元素个数)

添加:

原数组.splice(开始添加的下标,删除的元素个数=0,要添加的元素1[,要添加的元素2,……])

返回值:

原数组:

$event

1. 获取原生DOM事件的事件对象
2. 父组件通过 $event 接收子组件通过 $emit() 发送的数据，若传递多个参数，则是数组类型

@item-edited="editToDo(item.id, $event)"

    editToDo(toDoId, newLabel) {
      const toDoToEdit = this.ToDoItems.find((item) => item.id === toDoId);
      toDoToEdit.label = newLabel;
    }        

findIndex()
与 find() 使用方法类似，不同的是 find() 返回值是元素，而findIndex()返回值是元素的索引。

var arr = ['a','b','c','d'];
   var flag = arr.findIndex(item => {
        return item === 'c';
    })
    console.log(flag) // 得到： 2

下一节:焦点控制