vue-todolist-example学习

最新推荐文章于 2022-02-07 22:01:49 发布

weixin_33827965

最新推荐文章于 2022-02-07 22:01:49 发布

阅读量85

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/iioschina/blog/860465

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>

<head>
<title>todos-add-remove</title>
<meta charset="utf-8">
</head>

<body>
    <div id="todo-list-example">
        <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
        <ul>
            <li is="todo-item" v-for="(todo,index) in todos" v-bind:title="todo" v-on:remove="todos.splice(index,1)">
            </li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
    Vue.component('todo-item', {
        template: '\
       <li>\
       {{title}}\
       <button v-on:click="$emit(\'remove\')">X<button>\
       </li>\
        ',
        props: ['title']
    });

    new Vue({
        el: '#todo-list-example',
        data: {
            newTodoText: '',
            todos: [
                'Do the dishes',
                'Take out the trash',
                'WOw the lawn'
            ]
        },
        methods: {
            addNewTodo: function() {

                this.todos.push(this.newTodoText);
                this.newTodoText = '';
            }
        }

})
</script>
</body>

</html>

转载于:https://my.oschina.net/iioschina/blog/860465