javascript - 为什么运行后，会先显示{{text}}
本文介绍了javascript - 为什么运行后，会先显示{{text}}的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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>
解决方案
官网：https://cn.vuejs.org/v2/api/#...
这篇关于javascript - 为什么运行后，会先显示{{text}}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
