Vue作业--用Vue实现记事本功能

记事本{{title}}添加事务

zy6648

2960人浏览 · 2018-04-11 20:29:51

zy6648 · 2018-04-11 20:29:51 发布

<!DOCTYPE html>   
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<title>记事本</title>  
<meta http-equiv="X-UA-Compatible" content="IE-edge">  
<meta name="viewport" content="width=device-width,initial-scale=1">  
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">  
<script type="text/javascript" src="./vue.js"></script>
</head>  
    <body>  
        <div class="container" id="app">  
            <div class="row">  
                <div class="col-md-6 ">  
                    <h1 class="text-succeed">{{title}}</h1>  
                    <input type="text" name="text" placeholder="填写事务" v-model="newThing"/>  
                    <button type="button" class="btn text-active" v-on:click="addThing" v-on:keyup.enter="addThing">添加事务</button>    
                </div>  
            </div>  
            <div class="row">  
                <div class="col-md-3 ">  
                    <div class="thumbnail">  
                        <ul>  
                            <li v-for="(item,index) in things" class="text-center text-info" v-show="item.show">{{item.thing}}
                            <button class="btn btn-default bg-info" v-on:click="removeThing(index)" v-model="index">删除</button></li>  
                        </ul>  
                    </div>  
                </div>  
            </div>  
        </div>     
</body>  
<script type="text/javascript">  
    var vue=new Vue({  
        el:'#app',  
        data:{  
            title: '记事本',  
            things:[  
                {  
                    thing:'',  
                    show:false  
                } 
            ],  
            newThing:'',  
            message:'待填写的事务为空！！'  
        },  
        methods:{  
            addThing:function(){  
                if(this.newThing){  
                        this.things.splice(0,0,{  
                        thing:this.newThing,  
                        show:true  
                    }); 
                        this.newThing=''  
                }else{  
                    alert(this.message)  
                }         
            },  
            removeThing:function(index){  
                this.things[index].show=false  
            }     
        }  
    });  
</script>  
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^