Vue 组件封装，实现TodoList

最新推荐文章于 2026-03-20 13:29:07 发布

原创最新推荐文章于 2026-03-20 13:29:07 发布 · 969 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

VUE 专栏收录该内容

18 篇文章

订阅专栏

博客主要讲述封装Todolist和其中Title部分，以实现复用，还提及了相关文件main.js、Todolist.vue和Title.Vue。

封装Todolist和里面的Title部分，便于复用。

main.js

import Vue from 'vue'
import Todolist from './components/Todolist'
Vue.config.productionTip = false

new Vue({
  /* 找到id为app的容器,组件选择器 */
  el: '#app',
  components: {
    Todolist
  },
  template: '<Todolist/>'
})

Todolist.vue

<template>
  <div>
    <!--变量渲染-->
    <!--<p>{{title}}</p>-->
    <!--条件渲染true显示，false不显示-->
    <!--<p v-if="showSub">{{subTitle}}</p>-->
    <!--TODO：组件封装，属性传递前面要使用冒号，声明这是一个变量 -->
    <Title :title="title" :subtitle="subtitle"></Title>
    <div>
      <!--响应按Enter键加入事件-->
      <input @keyup.enter="handleClick" type="text" v-model="mytodo">
      <!--处理点击事件【添加】-->
      <button @click="handleClick">添加</button>
      <button @click="reset">清空已完成</button>
    </div>
    <!-- v-for循环列表显示-->
    <ul>
      <!--根据done的值，设置class的值-->
      <li :class="{'done':todo.done}" @click='toggle(index)'
          v-for='(todo, index) in todos'>{{index+1}}: {{todo.text}}</li>
    </ul>
    <p>{{remain}}/{{todos.length}}</p>
  </div>
</template>

<script>
import Title from './Title'
/* 暴露组件：组件内部的data，必须是个函数，防止多个组件之间变量的共享 */
export default {
  /* 组件可以使用别的组件，比如Title */
  components: {
    Title
  },
  data () {
    return {
      title: 'Vue Todo List',
      subtitle: 'VUE Base 1745',
      showSub: false,
      mytodo: '',
      todos: [
        {text: '吃饭', done: false},
        {text: '睡觉', done: true},
        {text: '打豆豆', done: false}
      ]
    }
  },
  // 新定义一个字段 remain,剩余未完成的事项。
  computed: {
    remain () {
      return this.todos.filter(v => !v.done).length
    }
  },
  methods: {
    // 点击添加事件响应(添加元素，清空输入框)
    handleClick () {
      this.todos.push({text: this.mytodo, done: false})
      this.mytodo = ''
      // this.reset()
    },
    toggle (i) {
      // 切换状态
      this.todos[i].done = !this.todos[i].done
    },
    reset () {
      // 已完成的过滤掉
      this.todos = this.todos.filter(v => !v.done)
    }
  }
}
</script>
<style>
  li.done{
    text-decoration: line-through;
    color:red;
    font-weight: bold;
    text-shadow: 1px 0px 0px yellow;
  }
</style>

Title.Vue

<template>
  <div class='title'>
    <!--变量渲染-->
    <p>{{title}}</p>
    <p >{{subtitle}}</p>
  </div>
</template>

<script>
export default {
  /* 对外暴露对象 */
  props: ['title', 'subtitle']
}
</script>
<style >
.title p{
  color:red;
}
</style>