加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

使用vue-cli编写todolist组件

发布时间:2020-12-16 23:02:20 所属栏目:百科 来源:网络整理
导读:工程结构 ? ?启动工程 npm run dev TodoList.vue !-- 模板 -- template div input class ="item" v-model ="inputValue" / button @click ="submit" 提交 / button ul todo-item v-for ="(item,index) of list" :key ="index" :content :index @delete ="myd

工程结构

?

?启动工程

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}
>

?

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读