使用Vue写记事本

叁歲伎倆 2022-09-04 15:40 175阅读 0赞

### 大家好鸭！又和大家见面了哦！ ###

现在我给大家看的就是我今天早上写的一个记事本，现在有我来带大家看看吧！

我感觉把代码的注释或者不理解的地方写在外面的话，大家看的灰常迷，所以我把注释写在代码里面，大家用的时候会非常方便欧~~~

我里面运用到了Bootstrap的代码，所以要引用一下，Vue引用那是必须的！

这是Vue的下载的地址，打开就能用哦！

<a href="https://www.bootcdn.cn/vue/">Vue.js的下载地址</a>

这是Bootstrap的下载的地址，打开就能用哦！

<a href="https://www.bootcdn.cn/twitter-bootstrap/">Bootstrap.css的下载地址</a>

现在就看看代码吧~~~

<body>
        
        
        <div id="app" class=" container">
            
            <h1 class=" text-center">星河记事本</h1>
            <div class="form-group">
                
                
                <input type="text" class=" form-control" v-model = "val" @keyup.enter = "add">
            </div>
            <ul class="list-group">
                
                <li class="list-group-item" v-for = "(item,index) in list">
                    
                    <span v-text = "index+1"></span>
                    
                    {
       {item}}
                    
                    
                    <a href="#" class=" text-danger pull-right" @click = "splice(index)">×</a>
                </li>
                
                <p><span class=" text-info">Total : {
       {list.length}}</span><span class="text-info" @click = "del">Empty</span></p>
            </ul>
        </div>
        <script>
            var vm = new Vue({
                // app的挂载点 为本文中 id为app
                el:'#app',
                data:{
                    // list 数组 
                    list:['吃饭','睡觉','打豆豆'],
                    // val 为 v-model 数据的绑定
                    val:""
                },
                methods:{
                    add(){
                        this.list.push(this.val);
                        this.val = ''
                    },
                    del(){
                        this.list = []
                    },
                    splice(e){
                        this.list.splice(e,1)
                    }
                }
            })
        </script>
    </body>

展示一下效果哦~~~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU1NTc2Mw_size_16_color_FFFFFF_t_70][]

以上就是我写的星河记事本，有什么问题欢迎留言哦~~~

**欢迎下次再见~~~**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU1NTc2Mw_size_16_color_FFFFFF_t_70]: /images/20220829/e2d2badc573c40b7837c77db9c69a06d.png