使用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.vueli @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} > ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |