v-for,v-if,v-else相关

VUE学习笔记

1.v-for 渲染列表

下面是有问题：猜猜问题是什么吧

<script setup>
import { ref } from 'vue' 
// 给每个 todo 对象一个唯一的 id
let id = 0 
const newTodo = {}
let newText = ""
const todos = ref([
 { id: id++, text: 'Learn HTML' },
 { id: id++, text: 'Learn JavaScript' },
 { id: id++, text: 'Learn Vue' }
]) 
function addTodo() {
 newTodo.id = id++
 newTodo.text = newText
 todos.value.push(newTodo)
} 
function removeTodo(todo) {
 todos.value = todos.value.filter(t=>t.id !== todo.id)
}
</script> 
<template>
 <form @submit.prevent="addTodo"> <input v-model="newText" required placeholder="new todo">
 <button>Add Todo</button> </form>
 <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }}
 <button @click="removeTodo(todo)">X</button> </li> </ul>
</template>

问题描述：输入添加文字后，点击添加，第二次点击时，上一次添加的文本变成和新添加的一致。

原因分析：const一般是常量（经常用于ref）,let是变量。const定义的可以修改，但是引用地址是不变的。

针对上面代码而言，每次修改的都是同一个对象，地址是不变的，假设三次修改，事实上三次指向的都是同一个，所以结果也会一样,当修改后面元素时会连带着前面一起被修改。

解决方法： 每次新添加时，都新初始化一个。

注释： 筛选方法filter ,filter后面是遍历元素的自定义名字 (t) ，

todos.value = todos.value.filter(t=>t.id !== todo.id)

function addTodo() {
  const newTodo = {}
  newTodo.id = id++
  newTodo.text = newText
  todos.value.push(newTodo)
}

2. v-if,v-else条件渲染

描述：就是v-if=........ ,等号后面是变量。

const awesome = ref(true)
function toggle() {
  awesome.value = !awesome.value
<template>
  <button @click="toggle">Toggle</button>
  <h1 v-if =awesome>Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>
}