文件路径

[[1 HTML 初级#文件路径]]

[!hint] 补充 @/api/hello.js 位于 src 文件夹下的 api 文件夹下的 hello.js 文件

数据

我们使用 来向 <template>…</template> 中插入数据，或者 js 表达式

<h1>{{ msg }}</h1>
<h1>{{ message.split('').reverse().join('') }}</h1>

数组

[!hint] 方法

此处 todos 为数组，todo 为数组元素

• todos.value.push(newTodo) 给数组的末尾添加元素

• todos.value.filter(……) 根据条件过滤出数组

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

---
todos.value.push({ id: id++, text: newTodo.value })

---
function removeTodo(todo) {
  todos.value = todos.value.filter((todos) => todos !== todo)
}

动态赋值 computed()

可以响应式地根据某个表达式，来响应式地赋值

// hideCompleted是个动态数据，根据这个值，使用三元运算符来动态返回数据，并使用返回地数据定义filteredTodos
const filteredTodos = computed(() => {
  return hideCompleted.value    
    ? todos.value.filter((todo) => todo.done===false)
    : todos.value
})