Vue实现记事本简单功能(新增删除统计清空隐藏)

最新推荐文章于 2024-01-13 00:36:05 发布

Astra27

最新推荐文章于 2024-01-13 00:36:05 发布

阅读量548

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/Phoebe4/article/details/107677959

版权

本文介绍了如何使用Vue实现记事本的一些基本功能，包括通过v-for和v-model进行新增和显示条目，利用v-on监听键盘事件实现回车新增，用v-on绑定删除操作，使用v-text和length属性进行统计，以及通过v-if或v-show实现列表隐藏。同时，文章详细解释了每部分代码的功能和作用。

摘要由CSDN通过智能技术生成

Vue实现记事本简单功能(新增删除统计清空隐藏)

上次一些补充：

V-for还可以？
- 在迭代属性输出的之前，对属性进行升序排序输出

html部分：
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
<ul>
    <li v-for="n in object">
     {
  { n }}
    </li>
  </ul>
</div>
js部分：
new Vue({
  el: '#app',
  data: {
    object: {
      2: '开心',
      1: '难过',
      0: '无奈'
    }
  }
})
//结果：按照012排列的一个列表：无奈 难过 开心

记事本新增：

前提解析
- 生成列表结构(V-for,字符串数组)
- 获取用户输入(v-model)
- 回车新增数据(v-on,enter添加)
代码

<body>
    <!--主体区域-->
    <section id="todoapp">
        <!--输入框-->
        <header class="header">
            <h1>小歪记事本</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
        </header>
        <!--列表区域-->
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(item,index) in list&#