工程结构
启动工程
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} >
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。