vue2写Todolist

月上小憩的布偶

已于 2022-10-22 09:29:38 修改

阅读量434

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue vue.js

于 2022-10-17 17:10:08 首次发布

本文链接：https://blog.youkuaiyun.com/xk2031510love/article/details/127056295

这个博客展示了如何使用Vue2框架创建一个简单的TodoList应用。模板部分包括输入框和两个展示未完成及已完成任务的区域。脚本部分定义了数据、计算属性以及添加、修改和删除任务的方法。CSS部分提供了基本的样式布局。通过这个实例，读者可以学习到Vue2的基础组件、数据绑定和事件处理等核心概念。

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

vue2写todolist

template部分

  <div>
    <div class="top">
      <div>Todolist</div>
      <input type="text" v-model.trim="inp" @keyup.enter="add" />
    </div>
    <div class="wwc">
      <h4>还未完成{{ num }}</h4>
      <div
        v-for="(item, index) in todo"
        :key="index"
        v-show="!item.checked"
        class="sb"
      >
        <div>
          <input
            type="checkbox"
            :checked="item.checked"
            @change="addHandle(index)"
          />{{ item.title }}
        </div>
        <button @click="del(index)">-</button>
      </div>
    </div>
    <div class="wwc">
      <h4>已经完成{{ unm }}</h4>
      <div v-for="(item, index) in todo" :key="index" v-show="item.checked">
        <input
          type="checkbox"
          :checked="item.checked"
          @change="addHandle(index)"
        /><span>{{ item.title }}</span>
        <button @click="del(index)">-</button>
      </div>
    </div>
  </div>

script部分

export default {
  data() {
    return {
      inp: "",
      todo: [],
    };
  },
  computed: {
    num() {
      var num = 0;
      num = this.todo.filter((item) => item.checked == false).length;
      return num;
    },
    unm() {
      var num = 0;
      num = this.todo.filter((item) => item.checked == true).length;
      return num;
    },
  },
  methods: {
    add() {
      this.todo.push({
        checked: false,
        title: this.inp,
      });
      this.inp = "";
    },
    addHandle(index) {
      this.todo[index].checked = !this.todo[index].checked;
    },
    del(index) {
      this.todo.splice(index, 1);
    },
  },
};

css部分

.top {
  width: 100%;
  height: 40px;
  color: white;
  line-height: 40px;
  background-color: #000;
  display: flex;
  justify-content: space-around;
  input {
    width: 200px;
    height: 27px;
    margin-top: 5px;
  }
}
.wwc {
  width: 60%;
  margin: 10px auto;
  .sb {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
  }
  button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
}