用Vue实现Todolist-代办事项

最新推荐文章于 2021-06-24 09:26:02 发布

Black_snow_ji

最新推荐文章于 2021-06-24 09:26:02 发布

阅读量872

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Black_snow_ji/article/details/104977338

首先准备思路

1.先引入Vue.js框架
2.可以自己写一个简单布局或者可以引入其他插件
3.具体请看代码有注释

这里是引用 sui 的插件和css样式

<div id="app">
        <!--header start-->
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left"></a>
            <a class="icon icon-emoji pull-right"></a>
            <h1 class="title">TodoList</h1>
        </header>
        <!--header end-->
        
        <!--content start-->
        <div class="content">
            <div class="content-block-title">简单卡片</div>
            <p>
                <input @keyup.enter="addTodo" type="text" v-model="msg">
            </p>
            <div class="card" v-for="todo in todos">
              <div class="card-content">
                <div class="card-content-inner">
                    <p>{
  
  {todo.title}}<