使用vue-cli编写todolist组件

前端开发 作者: 2024-08-22 12:50:01
工程结构 启动工程 TodoList.vue TodoItem.vue

工程结构

 启动工程

npm run dev

TodoList.vue

<!--模板-->
<template>
  div>
    >
      input class="item" v-model="inputValue"/>
      button @click="submit">提交</buttonul>
        todo-item v-for="(item,index) of list" :key="index" :content :index @delete="mydelete"></todo-item>

script>
import TodoItem from './components/TodoItem'
// 此处用来写逻辑,必须空出一行去写
export default {
   这块必须用函数去操作,注意缩进,缩进不对的话各路报错
  components: {
    todo-item: TodoItem
  },data () {
    return {
      inputValue: '',list: []
    }
  },methods: {
    submit () {
      this.list.push(.inputValue)
      .inputValue = 
    },mydelete (index) {
      .list.splice(index,1)
    }
  }
}
>
这个标签用于写样式style scopedstyle>

TodoItem.vue

li  @click="deleteItem">{{content}}li
export  {
  props: [contentindex],methods: {
    deleteItem () {
      .$emit(delete.index)
    }
  }
}
 Add "scoped" attribute to limit CSS to this component only scoped作用域,设置样式仅用于当前类,不加就是全局生效
  .item {color: aqua}
>
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_66674.html