vue框架制作TodoList

最新推荐文章于 2022-11-03 15:48:05 发布

weixin_34253539

最新推荐文章于 2022-11-03 15:48:05 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Hlong-ZY/p/7467851.html

版权

在初步学习了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>