Mac下用vue-cli+webpack+bootstrap实现一个todolist(二)
来源:互联网 发布:淘宝里面高仿手表店铺 编辑:程序博客网 时间:2024/05/16 00:27
- 整个应用实现的功能如下
1 增加待办事项,在input输入框中输入待办事项,点击回车键,自动添加到 待办事项列表中
2 点击待办事项可以改变它的状态,已完成的事件会有一个中划线的样式
打开App.vue将template的代码改为
<template> <div id="app" class="container"> <div class="col-sm-12 gap"> <input class="form-control" type="text" v-model="addNew" @keyup.enter="addNewItem"> </div> <div class="col-sm-12"> <ul class="list-group"> <li class="list-group-item" v-for="item in items" @click="toggleBtn(item)" :class="{text_decoration:item.isFinished}"> {{item.label}} </li> </ul> </div> </div></template>v-model: 进行数据的双向绑定@keyup.enter:是vue自带的回车键方法v-for: 用于循环数组里的每一项,生车功能对应html:class: 使用了对象的语法,在item.isFinihsed为true的时候添加text_decoration样式@click: 点击当前待帮事项,改变其状态
<script>export default { name: 'app', data: function() { return { addNew:'', items:[{ label:'看书', isFinished: true }, { label:'喝茶', isFinished: false },{ label:'打麻将', isFinished: false }] } }, methods: { addNewItem () { const obj = { label: this.addNew, isFinished: false }; this.items.push(obj); this.addNew = ''; }, toggleBtn (item) { console.log(item.isFinished); item.isFinished = !item.isFinished; } }}</script>
<style>.gap{ margin-bottom:10px;}.text_decoration { text-decoration: line-through;}</style>
阅读全文
0 0
- Mac下用vue-cli+webpack+bootstrap实现一个todolist(二)
- Mac下用vue-cli+webpack+bootstrap实现一个todo-list(一)
- windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
- windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
- 利用Bootstrap+Vue+Flask 制作一个todolist
- 二四、vue实现todolist
- vue-cli下bootstrap配置
- Vue-cli+router+webpack
- webpack与vue-cli
- vue-cli 快速构建vue应用,实现webpack打包
- vue-cli + webpack + vue-router
- vue实现简易留言板(todolist)
- Vue实现简单ToDoList
- vue-cli&webpack&arcgis API For JS的天坑之路(二)
- 用Vue-cli生成vue+webpack的项目模板
- vue环境搭建(一)webpack和vue-cli安装
- (起步1)IDEA2016+VUE+WEBPACK+VUE-CLI 搭建
- vue-cli webpack在node环境下安装使用详解
- Servlet获取表单数据
- Servlet路径跳转
- 修改tomcat窗口名称
- Java遍历目录
- 证书的引入
- Mac下用vue-cli+webpack+bootstrap实现一个todolist(二)
- Hadoop生态系统及版本
- windows 64位安装redis 及Redis Desktop Manager使用
- hibernate中load()和get()的区别
- Servlet获取初始化参数
- MVC模型介绍
- Hadoop安装
- HDFS的基本概念
- HDFS数据管理策略