Vue小案例-小黑记事本的实现

最新推荐文章于 2024-07-27 19:08:11 发布

原创

最新推荐文章于 2024-07-27 19:08:11 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

本文通过实现小黑记事本，展示了Vue中指令的综合运用，重点在于理解并应用Vue的基础指令，实现功能的过程中不涉及样式部分。

小黑记事本综合应用了前面学习的集中指令，并且对指令进行综合性的基础应用联系。（样式没有写，仅实现了vue指令的功能。）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
</head>
<body>
    <!-- 主题区域 -->
    <div id="toduapp">
        <h1>小黑记事本</h1>
        <!-- 输入框 -->
        <!--输入框双向绑定数据，更改默认数据inputValue，然后绑定回车事件addValue，点击回车将数据添加到数组-->
        <input type="text" v-model="inputValue" @keyup.enter="addValue" autofocus='autofocus' autocomplete="off" placeholder="请输入任务">
        <!-- 列表区域 -->
        <ul>
            <!--生成事件列表，v-for循环数组数据，绑定删除方法，点击时候，可以删除本条数据-->
            <li v-for="(item, index) in list" @click="removeValue(index)">
                {
  
  { index + 1 }}-{
  
  { item }}
                <span>X</span>
            </li>