vue练习 简易记事本

效果图：

 

 （我觉得好丑）

在输入框输入完成后，回车就可以增加内容，主要是练习了v-on v-if v-for v-model等

<!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>
    <script type="text/javascript" src="../vue/vue (3).js"></script>
    <style>
        /* 通用的css文件 */
        /* 基本的化 */
        *{margin:0;padding:0;}
        a{ text-decoration:none; color:#464646;}
        img{display:block}
        ul{list-style:none}
        body{font-family:Arial;}
        h1,h2,h3{font-size: 16px;}
        body{font-family: Arial,'宋体';}                  /* 字体 */


        body{margin: 0 auto;max-width: 600px;}
        h2{text-align: center;font-size: 50px;}
        #main{margin: 0 auto;width: 400px;border: 1px solid slateblue;}
        input{margin: 0 auto;width: 400px;height: 30px;display: block;border: 1px solid slateblue;}
        div ul{list-style:none;}
        div ul{display: block;width: 400px;margin: 0 auto;}
        div ul li{width: 400px;height: 30px;}
        .rig{float: right;}
    </style>
</head>
<body>
    <h2>简易记事本</h2>
    <div id="main">
        <input type="text" placeholder="请输入" v-model="mes" @keyup.enter="add" >
        <ul>
            <li v-for="(item,index) in list">{{index+1}}.   {{item}}<button class="rig" @click="remove(index)">删除</button></li>
            
        </ul>
        <div v-if="list.length!=0">
            {{list.length}}个待做事项
            <button class="rig" @click="clear">清空</button>
        </div>
        
    </div>                                
    <script>
       new Vue({
           el:"#main",
           data:{
               list:["写代码","踩踩踩","sssssss"],
               mes:""
           },
           methods:{
               add:function(){
                this.list.push(this.mes);
               },
               remove:function(index){
                    this.list.splice(index,1);
               },
               clear:function(){
                   this.list=[];
               }
           }
       })
    </script>
</body>
</html>

　　

posted @ 2021-08-12 14:45  心懒了♀麻木来了  阅读(73)  评论(0)    收藏  举报