为什么运行后,会先显示{{text}}

O_o华丽丽
  • 130

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*样式重置*/
        body,p,ul,li,input,h1,h2,h3,h4,h5,h6,textarea,th,td{margin: 0;padding: 0;}
        table{border-spacing: 0;border-collapse: collapse;border: none;}
        button{border: none;}
        .mask{width:800px;background-color:rgb(220,220,220);font-family: "microsoft yahei";padding:0 20px;margin:100px auto;}
        .title{height: 80px;line-height: 80px;color: orange;font-size: 36px;border-bottom: 1px solid #000;}
        .show{font-size: 40px;margin: 10px 0;text-shadow: 0 0 1px black;}
        label{padding:10px 0;font-size: 20px;}            
        input{margin: 10px 0px;height: 30px;width:100%}
        .add,.reset{width:200px;height: 35px;display: block;margin: 10px auto;}
        .add{background-color: dodgerblue;}
        .reset{background-color: red;}
        table{width:100%;text-align: center;}
        th,td{height:40px;border: 1px solid #999;}
        .del{width:70px;height: 30px;background: orange;}
        .delAll{width:100px;height: 30px;background: red;}
        .alertbox{width:400px;height: 400px;border-radius: 5px;background-color: #999;border: 1px solid orange;text-align: center;vertical-align: middle;}
        .center{position: absolute;margin: auto;left: 0;right: 0;top: 400px;bottom: 0;}
        .cancel,.ensure{width: 80px;height: 30px;border: 1px solid orange;margin:300px 10px 0 0;border-radius: 6px;}
    </style>
    <script src="vue.js"></script>
</head>
<body>

        <div class="mask">
            <h1 class="title">待办事项</h1>
            <button class="show" @click="formshow()">{{text}}</button>
            <div class="wrap" v-show='bol'>
                <form> 
                    <label for="">待办日期</label>
                    <input type="date" name="date" id="" placeholder="输入待办日期" / v-model="date">
                    <label for="">待办事项描述</label>
                    <input type="text" name="des" id="" placeholder="输入待办事项描述" / v-model="des"><br />
                </form>            
                <button type="button" class="add" @click="additem()">添加</button><br />
                <button type="button" class="reset" @click="rest()">重置</button>
            </div>
            <h3>待办事项列表</h3>
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>待办日期</th>
                        <th>事项描述</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for='(item,index) in arr'>
                        <td>{{index+1}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.des}}</td>
                        <!--<td><button class="del" @click="delsingle()">删除</button><button class="amend" @click="amend()">修改</button></td>-->
                        <td><button class="del" @click="isshow=true;nowIndex=index;">删除</button><button class="amend" @click="amend()">修改</button></td>
                    </tr>
                </tbody>
                <tr v-show="this.arr.length==0">
                    <td colspan="4">
                        <span>暂无数据</span>
                    </td>
                </tr>
                <tr v-show="this.arr.length!=0">
                    <td colspan="4">
                        <button class="delAll" @click="delAll()">删除全部</button>
                    </td>
                </tr>
            </table>
            <div class="alertbox center" v-show="isshow">
                <button class="cancel" @click="cancel()">取消</button>
                <button class="ensure" @click="ensure()">确定</button>
            </div>
        </div>

</body>

</html>

<script>

var vm=new Vue({
    el:".mask",
    data:{
        bol:false,
        text:'+',
        arr:[

// {date:2011,des:"吃饭"},{date:2011,des:"吃饭"},{date:2011,des:"吃饭"}

        ],
        date:"",
        des:"",
        isshow:false,
        currentIndex:-1
    },
    methods:{
        formshow:function(){
            this.bol=!this.bol;
            this.text=this.text=="+"?this.text="-":this.text="+";
        },
        additem:function(){
            this.arr.push({date:this.date,des:this.des});
            this.date="";
            this.des="";
        },

// delsingle:function(i){
// this.currentIndex=i;
// this.isshow=!this.isshow;
// },

        cancel:function(){
            this.isshow=false;
        },
        ensure:function(){
            this.arr.splice(this.currentIndex,1);
            this.isshow=false;
        },
        delAll:function(){
            this.arr=[];
        },
        reset:function(){
            this.date="";
            this.des="";                
        }
    }
})

</script>

回复
阅读 1.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏