VUE todolist

最新推荐文章于 2021-12-29 18:34:26 发布

飞鸿酱

最新推荐文章于 2021-12-29 18:34:26 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏： front-end-vue

本文链接：https://blog.youkuaiyun.com/weixin_38465623/article/details/81231909

front-end-vue 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一个使用Vue.js构建的简单待办事项应用程序。该应用包括输入框用于添加待办事项，按钮用于提交，以及一个事项列表可以显示所有已添加的待办事项并提供删除功能。

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

<template>
  <div>
    <div>
      <input v-model="inputValue"/>
      <button @click="handelpush">push</button>
    </div>
    <ul>
      <todo-item
        v-for="(item,index) of list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handelDelete"
      ></todo-item>
    </ul>
  </div>
</template>

<script>
  import todoItem from './components/todoItem'

  export default {
    components: {
      'todo-item': todoItem
    },
    data() {
      return {
        inputValue: '',
        list: []
      }
    },
    methods: {
      handelpush() {
        this.list.push(this.inputValue),
          this.inputValue = ''
      },
      handelDelete(index) {
        this.list.splice('index', 1)
      }
    }
  }
</script>

<style>

</style>

<template>
  <li @click="handelDelete">{{content}}</li>
</template>

<script>
  export default {
    props: ['content', 'index'],
    methods: {
      handelDelete() {
        this.$emit('delete', this.index)
        // alert("dasdfasd");
      }

    }
  }
</script>

<style scoped>

</style>

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import todoList from './todoList'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {todoList},
  template: '<todoList/>'
})