在初步学习了vue之后，我们可以使用vue的基础知识来实现一个todolist列表，主要功能是通过一个输入框来输入，然后将输入的内容同步的显示在页面上，当点击其中的一项时，出现一条下划线。
首先列出在实现功能的过程中需要使用的一些vue语法。
1.因为要实现双向绑定，所以需要使用v-model。
2.涉及到循环渲染列表，需要使用v-for。
3.要实现点击事件，所以在列表上要通过v-on绑定点击事件。
4.点击时要在列表上添加或者会删除类名，从而控制下划线样式，所以要使用v-bind后面接{}的形式来判断是否显示类名。
接下来是实现代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
<style>
.underline{
text-decoration: underline;
}
</style>
</head>
<body>
<div id="todoList">
<h1 v-text="msg"></h1>
<input type="text" v-model="newItem" @keyup.enter="doAddNew"/>
<ul>
<li v-for="item in items" v-text="item.label" @click="finished(item)" :class="{underline:item.isFinished}"></li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#todoList",
data:{
items:[],
newItem:‘‘,
msg:"TodoList"
},
methods:{
doAddNew: function () {
this.items.push({
label:this.newItem,
isFinished:false
});
this.newItem = ‘‘;
},
finished: function (item) {
item.isFinished = !item.isFinished;
}
}
});
</script>
</html>
时间： 2024-10-08 00:51:03