基于vue.js实现备忘录

李现分现

已于 2022-02-24 13:08:02 修改

阅读量803

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript bootstrap

于 2022-02-24 13:07:38 首次发布

本文链接：https://blog.csdn.net/qq_47828130/article/details/123109423

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本篇文章涉及vue挂载，遍历，获取数据等基础语法和bootstrap快速布局，适合练手巩固

效果图：
在这里插入图片描述
源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../lib/bootstrap.css"> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
    <style>
        html,body{
            background-color: rgb(255, 240, 240);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <h4 class="card-title">高质量独处可以做的事</h4>
                        <p class="card-text">孤独才是人生常态.</p>
                    </div>
                </div>
                <hr>
                <div>
                    <div class="row">
                        <div class="col-md-4">
                            <input class="form-control" type="text" placeholder="请输入内容" v-model="inputValue">
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary" @click="add">添加</button>
                        </div>
                    </div>
                    
                    
                </div>
                <hr>
            
            <table class="table table-hover table-bordered table-striped">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>status</th>
                        <th>thing</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 遍历，渲染列表 -->
                    <tr v-for="item in thingsList">
                        <td>{{item.id}}</td>
                        <td>
                            <div>
                                <input type="checkbox" v-model="item.status"><!-- status状态为false，复选框不选中 -->
                            </div>
                        </td>
                        <td>{{item.name}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                inputValue:'',//默认输入框为空
                index:30,//用于插入内容索引自增
                thingsList:[
                    // 1-10
                    {id:1,status:false,name:'早睡早起 尽量不熬夜'},
                    {id:2,status:false,name:'少吃甜食和油炸食品 容易长痘 发胖'},
                    {id:3,status:false,name:'定期修理眉形'},
                    {id:4,status:false,name:'学会自己做饭'},
                    {id:5,status:false,name:'定期清理手机内存 相册分类'},
                    {id:6,status:false,name:'摘抄自己喜欢的句子'},
                    {id:7,status:false,name:'了解新闻头条'},
                    {id:8,status:false,name:'收拾房间'},
                    {id:9,status:false,name:'学习拍摄 P图 视频剪辑'},
                    {id:10,status:false,name:'一个人爬山'},
                    // 11-20
                    {id:11,status:false,name:'一个人买菜做饭'},
                    {id:12,status:false,name:'一个人看日落'},
                    {id:13,status:false,name:'一个人攀岩'},
                    {id:14,status:false,name:'一个人看海'},
                    {id:15,status:false,name:'坚持锻炼'},
                    {id:16,status:false,name:'培养自己的兴趣与爱好'},
                    {id:17,status:false,name:'练字'},
                    {id:18,status:false,name:'去想去的地方 吃想吃的东西'},
                    {id:19,status:false,name:'学会说话技巧'},
                    {id:20,status:false,name:'计划一年存多少'},
                    // 21-30
                    {id:21,status:false,name:'学习烘焙'},
                    {id:22,status:false,name:'研究穿搭'},
                    {id:23,status:false,name:'学习外语'},
                    {id:24,status:false,name:'定期断舍离'},
                    {id:25,status:false,name:'学习理财'},
                    {id:26,status:false,name:'尝试和陌生人聊天，提高胆子'},
                    {id:27,status:false,name:'多看时尚杂志 提升时尚穿搭 气质'},
                    {id:28,status:false,name:'一个人看电影'},
                    {id:29,status:false,name:'忘掉过去'},
                    {id:30,status:false,name:'听歌'},
                ]
            },
            methods:{
                add(){
                    var newData={id:this.index+=1,status:false,name:this.inputValue}
                    this.thingsList.push(newData)//往列表插入数据
                    this.inputValue=''
                }
            }
        })
    </script>
    
</body>
</html>