vue.js 入门案例 my todos

最新推荐文章于 2024-05-06 18:26:28 发布

Agrass啊草

最新推荐文章于 2024-05-06 18:26:28 发布

阅读量2.2k

点赞数 2

分类专栏： vue 文章标签： vue-js

本文链接：https://blog.csdn.net/unaMattin/article/details/53589688

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>project</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-">
<div class="container" id="app">
<div class="row">
<div class="clo-md-4 clo-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome Vue js 2.0</div>
<div class="panel-body">

    <h1>my todos</h1>
    <ul class="list-group">
        <li class="list-group-item" v-for="(todo,index) in todos">{{todo.title}}
        <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
        </li>
    </ul>

    <form v-on:submit.prevent="addTodo(newTodo)">
        <div class="form-group"> 
            <input type="text" v-model="newTodo.title" class="form-control" placeholder="Add a new todo">
        </div>
        <div class="from-group">
            <button class="btn btn-success" type="submit">Add todo</button>
        </div>
    </form>
</div>
</div>
</div>  
</div>
</div>
</nav>


</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello world',
            //数组
            todos:[{id:1,title:'go to school'}],
            newTodo:{id:null,title:''}
        },
        methods:{
            addTodo(newTodo){
                this.todos.push(newTodo)
                this.newTodo={id:null,title:''}
            },
            deleteTodo(index){
            //  this.todos.$remove(todo)   删除
                this.todos.splice(index,1)
            }
        }
    })

/*
    v-on:submit.prevent 的 prevent 是阻止默认提交事件;
    addTodo(newTodo){} 等同 addtodo:function(){};
    this.todos.push(newTodo) 将newTodo添加到todos里
    this.newTodo={id:null,title:''} 添加完成后input里为空

*/
</script>
</html>

Agrass啊草

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js 入门案例 my todos

学习笔记。<html><head> <title>project</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"></head><body><nav class="navbar navbar-default navbar-static-"><div class="container" id
复制链接

扫一扫