Vue小案例—todo list

最新推荐文章于 2024-06-16 21:48:01 发布

原创最新推荐文章于 2024-06-16 21:48:01 发布 · 673 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用Vue.js框架实现一个简单的待办事项应用程序。该应用具备添加任务、标记任务完成状态及本地存储等功能，并通过简洁的样式展现。文章详细展示了组件模板、数据绑定、事件监听等关键实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="app">
      <h1 v-text = "title"></h1>
      <input v-model = "newItem" v-on:keyup.enter = "addNew"/>
      <ol>
          <li v-for="item in items" v-bind:class="{finished:item.
              isFinished}" v-on:click ="toggleFinished(item)">
              {{item.label}}
          </li>
      </ol>
  </div>
</template>

<script>
//设置store存储信息
import Store from './store'
export default {
 data:function () {
    return {
      title: 'this is todo list',
      //获得每次输入的信息
      items:Store.fetch(),
      /*{
          label:'coding',
          isFinished:true
      },{
          label:'walking',
          isFinished:true
      }*/
      
      liClass:'thisIsLiClass',
      newItem:"",
    }
  },
 watch:{
     items:{
         handler:function(items) {
             //把输入的值存入到localStorage
             Store.save(items);
         },
         deep:true
     }
 },
 methods:{
         toggleFinished:function (item) {
             item.isFinished = !item.isFinished;
         },
         addNew:function () {
             this.items.push({
                 label:this.newItem,
                 isFinished:false
             })
             this.newItem = "";
         }
 }
}
</script>

<style>
.finished{
    text-decoration: line-through;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>