【Vue】记事本

news2025/12/22 15:45:21

上一篇：Vue的指令

https://blog.csdn.net/m0_67930426/article/details/134599378?spm=1001.2014.3001.5501

本篇所需指令： v- for v-model v-on v-show

删除功能

添加功能

统计功能

清空功能

v-show

删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<header>
  <h1>记事本</h1>
  <input placeholder="请输入任务"  />
  <button  class="add">添加任务</button>
</header>
<section class="main">
  <div class="main">
    <ul class="do-list">

      <li class="todo" v-for="(item,index) in list" :key="item.id">
      <div class="view">
        <span class="index">{{index+1}}.</span><label>{{item.text}}</label>
        <button @click="del(item.id)" class="destroy"  >x</button>
      </div>
      </li>
    </ul>
  </div>
</section>
<footer class="footer">
  <span class="count">合计:<strong>2</strong></span>
  <button class="clear" >清空任务</button>
</footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>



<script>

  var app=new Vue({
    el:'#app',
    data:{

        list:[
          {id:1,text:'记得带语文书'},
          {id:2,text:'记得带数学书'},
        ]
    },
    methods:{
      del(id){
        this.list=this.list.filter(item=> item.id!==id)
      }
    }

  });
</script>

</body>
</html>

添加功能

add(){
        if(this.thing.trim()===''){
          alert('请输入任务名称')
          return
        }
        this.list.unshift({
          id:"",
          text: this.thing,
        })
      }

这里主要使用了v-model指令，通过v-model指令绑定输入框，获取表单元素的内容

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

统计功能

核心是计算数组的长度

清空功能

原理：点击清空按钮，将原数组变为空数组

v-show

当点击清空按钮的时候，将底部隐藏

all-functions

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<header>
  <h1>记事本</h1>
  <input v-model="thing" placeholder="请输入任务"  />
  <button  @click="add()">添加任务</button>
</header>
<section class="main">
  <div class="main">
    <ul class="do-list">

      <li class="todo" v-for="(item,index) in list" :key="item.id">
      <div class="view">
        <span class="index">{{index+1}}.</span><label>{{item.text}}</label>
        <button @click="del(item.id)" class="destroy"  >x</button>
      </div>
      </li>
    </ul>
  </div>
</section>
<footer class="footer"   v-show="list.length>0">
  <span  class="count">合计:<strong>{{list.length}}</strong></span>
  <button @click="clear()" >清空任务</button>
</footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>



<script>

  var app=new Vue({
    el:'#app',
    data:{
       thing:'',
        list:[
          {id:1,text:'记得带语文书'},
          {id:2,text:'记得带数学书'},
        ]
    },
    methods:{
      del(id){
        this.list=this.list.filter(item=> item.id!==id)
      },

      add(){
        if(this.thing.trim()===''){
          alert('请输入任务名称')
          return
        }
        this.list.unshift({
          id:"",
          text: this.thing,
        })
      },

      clear(){
        this.list=[]
      }


    }

  });
</script>





</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1255468.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！