SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>
<head>
	<title>test1</title>
	<style type="text/css">
		.list-group button {
    background: none;
    border: 0;
    color: red;
    outline: 0;
    float: right;
    font-weight: bold;
}

	</style>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<body>
<div id="wrap" style="margin: 0 0 0 0;padding: 0;position: absolute;width: 100%;height: 100%; background-color: rgba(0,0,0,0.7); z-index: 100;display: none; text-align: center; color:white;font-size:3rem;font-weight: bolder;" onclick="test2()" >
</div>
<script type="text/javascript">
	function test2(){
		document.getElementById('wrap').style.display = 'none';	

	}
</script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="vue.js"></script>

<div class="container" id="app" v-cloak>
  <p v-show="remainTask.length>0">
    预约列表 ({{remainTask.length}})
  </p>
  <ul class="list-group">
    <template v-for="task in remainTask">
      <li class="list-group-item">
        <span v-on:dblclick="editTask(task)" title="编辑任务">
          {{task.text}}
        </span>
        <button v-on:click="removeTask(task)" title="移除任务">
          &#10007;
        </button>
        <button v-on:click="completeTask(task)" title="任务完成">
          &#10004;
        </button>
      </li>
    </template>
  </ul>
  <hr style="height:3px;border:none;border-top:3px double red;" />
	<p>
    已完成的Task({{filterTask.length}})
  </p>
  <ol class="list-group">
    <template v-for="task in filterTask">
      <li class="list-group-item">
        {{task.text}}
      </li>
    </template>
  </ol>


  <hr style="height:3px;border:none;border-top:3px double red;" />
<form>
    <div class="form-group">
      <!-- <label for="exampleInputEmail1">
        任务描述
      </label> -->
      <input type="text" id="txt" class="form-control" placeholder="开始休息、并留存休息时间" v-model="newTask"
      required>
    </div>
    <div class="form-group">
   <!--    <button class="btn btn-primary" type="submit" v-on:click="addTask"> -->
   		<!-- <button class="btn btn-primary" type="button" v-on:click="waitfor">   添加任务
      </button>
 --><div style="text-align: center; z-index: 1000">
<button class="btn btn-primary" type="button" onclick="test()">开始休息</button>
<script type="text/javascript">
	function test(){
		var t=document.getElementById("txt");
		if (t.value == "") {
			document.getElementById("wrap").innerHTML="已暂停营业"
		}
		else{	
		document.getElementById("wrap").innerHTML=t.value;
		}
		document.getElementById('wrap').style.display = 'block';
		

	}
	/*function test(){
		var t=document.getElementById("txt");
		alert(1);
		document.getElementById("wrap").innerHTML=t.value;
		document.getElementById("wrap").innerHTML.style{display:block};

	}*/
</script>
      </div>
    </div>
  </form>

</div>  
<script type="text/javascript">
	var app = new Vue({ //创建Vue对象实例
  el: "#app",
  //挂载DOM元素的ID
  data: {
    tasks: [{
      text: "高大壮    15514231234    剪发",
      complete: false
    },
    {
      text: "阳阳    15514232222    剪发",
      complete: false
    },
    {
      text: "李大宝    15514232345    剪发",
      complete: false
    },
    {
      text: "王战    15514238888    剪发",
      complete: true
    },
    {
      text: "林岁岁    18042354122    染发(黑色)",
      complete: false
    },
    {
      text: "刘谋    18504051743    理发",
      complete: true
    }],
    //newTask: "程序员的修炼之道" //默认值
  },
  methods: {
    addTask: function(event) { //添加任务
      if(this.newTask == ""){
          return;
      }
      event.preventDefault();
      this.tasks.push({
        text: this.newTask,
        complete: false
      });
      this.newTask = "";
    },
    editTask: function(task) { //编辑任务
      //移除当前点击task
      this.removeTask(task);

      //更新vue实例中newTask值
      this.newTask = task.text;
    },
    removeTask: function(task) { //删除任务
      //指向Vue实例中的tasks
      _tasks = this.tasks;
      //remove
      _tasks.forEach(function(item, index) {
        if (item.text == task.text) {
          _tasks.splice(index, 1);
        }
      })
    },
    completeTask: function(task) { //任务完成状态
      task.complete = true; //设置任务完成的状态
    }
  },
  //用于计算属性,属性的计算是基于它的依赖缓存(如vue实例中的tasks) 
  //只有当tasks数据变化时,才会重新取值
  computed: {
    remainTask: function() { //筛选未完成的记录
      return this.tasks.filter(function(task) { //filter过滤器
        return ! task.complete;
      })
    },
    filterTask: function() { //筛选已完成的记录
      return this.tasks.filter(function(task) {
        return task.complete;
      })
    }
  }
});


</script>
</body>
</html>

本项目引用的自定义外部资源