Vue.js基础——表单绑定、条件渲染、列表渲染

表单绑定

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <input v-model="text">
  <p>{{ text }}</p>
</template>

可以同时使用v-bind和v-on在表单输入上创建一个双向绑定，而为了简化双向绑定，可以使用另一个指令v-model，也是前面写法的语法糖。

v-model会将被绑定的值与input值自动同步，也就可以省略事件处理函数。除了文本输入框之外，v-model还支持单选框，多选框，下拉框之类的输入类型。

条件渲染

<script setup>
import { ref } from 'vue'

const awesome = ref(true)

function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no</h1>
</template>

可以使用v-if来有条件的渲染元素。当v-if 的值为真时，渲染元素，若为假，则从dom元素中移除。同时也可以使用v-else、v-else-if来表示其他条件分支。

列表渲染

<script setup>
import { ref } from 'vue'

// 给每个 todo 对象一个唯一的 id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t != todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" 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>

可以使用v-for渲染一个基于源数组的列表：

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

这里的todo是局部变量，表示当前正在迭代的数组元素，只能在v-for做绑定的元素上或者其内部访问，类似于函数作用域。

同时每个数组元素都有一个唯一id，使其作为一个特殊的key属性绑定到每一个<li>上，使得vue可以精确的移动每一个<li>，以匹配对应的对象在数组中的位置。

可以通过直接操作源数组来更新列表：todos.value.push(newTodo)

或使用新数组替代原数组：todos.value = todos.value.filter(.....)