vue + element-ui 简单的入门小例子——todolist

最新推荐文章于 2022-07-06 20:32:26 发布

拿破轮

最新推荐文章于 2022-07-06 20:32:26 发布

阅读量567

点赞数

文章标签： vue

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.6.0/lib/theme-chalk/index.css">

<script src="https://unpkg.com/vue@2.6.0/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui@2.6.0/lib/index.js"></script>
<title>todolist</title>

<style>
/*#FBFBFB #B9E1DC #F38181 #756C83 */

#app {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
color: #756C83;
}

.el-header {
text-align: center;
}

.todoinput {
margin-bottom: 40px;
}

.list-row {
height: 40px;
background-color: #fbfbfb;
margin-bottom: 5px;
}

.check {
text-align: center;
line-height: 40px;
}

.red {
border-left: #ef5f65 2px solid;
}

.green {
border-left: #B9E1DC 2px solid;
}

.ipcont {
width: 90%;
margin-top: 8px;
border: 0;
line-height: 24px;
background-color: transparent;
font-size: 16px;
color: #756C83;
}

.close {
text-align: center;
line-height: 40px;
}

.el-icon-close {
cursor: pointer;
}
.el-icon-close:hover {
color: #ef5f65;
}

.done {
text-decoration: line-through;
}
</style>

</head>

<body>
<div id="app">
<el-container>
<el-header height="20">
<h1>ToDoList</h1>
</el-header>
<el-main>
<el-input placeholder="回车添加待办事项" class="todoinput" @keyup.enter.native="add" v-model="newtodo.content"></el-input>
<p>进行中：{{ todolist.length }} 已完成：{{ donenum }}</p>
<el-row v-for="(item, index) in todolist" class="list-row">
<el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="check" :class="{ red: !todolist[index].done, 'green': todolist[index].done }">
<el-checkbox size="mini" v-model="item.done"></el-checkbox>
</el-col>
<el-col :xs="20" :sm="22" :md="22" :lg="22" :xl="22">
<input type="text" v-model="item.content" class="ipcont" :class="{done: todolist[index].done}">
</el-col>
<el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="close">
<i class="el-icon-close" @click="del(index)"></i>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
<script>
var doit = new Vue({
el: '#app',
data: {
newtodo: {
content: '',
done: false
},
todolist: [
{
content: '现在开始吧',
done: false
}
]
},
methods: {
add: function () {
if (this.newtodo.content) {
this.todolist.push(this.newtodo)
this.newtodo = { content: '', done: false }
}
},
del: function (index) {
this.todolist.splice(index, 1)
}
},
computed: {
donenum: function () {
return this.todolist.filter(function (val) { return val.done }).length
}
}
});
</script>
</body>

</html>

拿破轮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue + element-ui 简单的入门小例子——todolist

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;m
复制链接

扫一扫