<script>
export default {
data () {
return {
items: [
{
label: 'read books',
isFinished: false
},
{
label: 'eat dinner',
isFinished: true
}
] }
}
}
</script>
<style>
.finished {
text-decoration: line-through;
}
</style>
效果
在输入框中填写item，点击回车完成添加列表并显示同时清空input框内容
用到的知识：
监听回车
表单控件监听
<template>
<div id="app">
<input v-on:keyup.enter="addNewItem" v-model="newItem"/>
<ul>
<li v-for="item in items" v-bind:class={finished:item.isFinished}>
{{item.label}}
</li>
</ul>
</div>
</template><script>
export default {
data () {
return {
items: [
{
label: 'read books',
isFinished: false
},
{
label: 'eat dinner',
isFinished: true
}
],
newItem: ''
}
},
methods: {
addNewItem () {
this.items.push({label: this.newItem,isFinished: false})
this.newItem = '' //清空输入框
}
}
}
</script>
<style>
.finished {
text-decoration: line-through;
}
</style>
点击内容进行状态转换
在li标签上绑定一个click事件，点击时修改isFinished
//添加代码
<li v-for="item in items" v-bind:class={finished:item.isFinished} v-on:click="finish(item)">
{{item.label}}
</li>methods: {
finish (item) {
item.isFinished = !item.isFinished
}
}
这样一个简单的todolist的基本功能已经完成。
动图效果
小彩蛋：linux下制作GIF动图
上网查找了很多办法，很多不适合linux平台，发现这个办法不错:
下载SimpleScreenRecoder软件：
三条命令：
sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder
sudo apt-get update
sudo apt-get install simplescreenrecorder
