码迷,mamicode.com
首页 > 其他好文 > 详细

vue框架制作TodoList

时间:2017-09-02 21:44:15      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:显示   back   blog   methods   har   http   ext   add   双向   

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

 

vue框架制作TodoList

标签:显示   back   blog   methods   har   http   ext   add   双向   

原文地址:http://www.cnblogs.com/Hlong-ZY/p/7467851.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!