显示时间，获取时间(没对)

最新推荐文章于 2023-11-23 09:37:28 发布

hamimelon2020

最新推荐文章于 2023-11-23 09:37:28 发布

阅读量392

点赞数

分类专栏： JavaScript vue 文章标签： javascript html vue.js

本文链接：https://blog.csdn.net/weixin_40945354/article/details/120183067

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

这是一个使用 Vue.js 的示例，展示如何获取当前日期并在页面上显示。同时，它演示了如何遍历数据数组计算总圈数。用户可以输入日期，并通过点击按钮显示当前时间。此外，表格中展示了每个圈数及其对应的值，底部显示了所有圈数的总和。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<style>
	body {
	  width: 600px;
	}
	table {
		border: 1px solid black;
	}
	table {
		width: 100%;
	}
	th {
		height: 50px;
	}
	th, td {
		border-bottom: 1px solid #ddd;
		text-align: center;
	}
	span {
	  float: right;
	}
	
	[v-cloak] {
	  display: none;
	}
  </style>
  
<body>
<div id="app">
	<p>瓜瓜跑步圈数</p>
	今天是：<input type="text" v-on:binding="getCurrentTime">
	<button id="onclick" document.getelement.id=onclick>显示日期</button>
    <table>
		<tr>
			<th>序号</th>
			<th>圈数</th>
		</tr>
		<tr  v-for="quanshu in quanshus" :key="quanshu.id">
			<td>{{ quanshu.id }}</td>
			<td>{{ quanshu.meitang }}</td>
		</tr>
	</table>
	<span>总圈数：{{ totalQuan }}</span>
</div>


<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
		 quanshus:
		 [
			 {id: 1, meitang: 0.9},
			 {id: 2, meitang: 2},
			 {id: 2.1, meitang: 0.3}
		 ],
	 }
	},
	methods: {
    getCurrentTime() {
        //获取当前时间并打印
        var _this = this;
    　　let yy = new Date().getFullYear();
    　　let mm = new Date().getMonth()+1;
    　　let dd = new Date().getDate();
    　　let hh = new Date().getHours();
    　　let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
    　　let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
    　　_this.gettime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
    　　console.log(_this.gettime)  
    }
}                              ,
	computed: {
		totalQuan() {
			let total = 0;
			for(let quanshu of this.quanshus) {
				total += quanshu.meitang
			}
			return total;
		}
	}
		
	
 }).mount('#app')

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

为啥还不行

<!DOCTYPE html>
<style>
	body {
	  width: 600px;
	}
	table {
		border: 1px solid black;
	}
	table {
		width: 100%;
	}
	th {
		height: 50px;
	}
	th, td {
		border-bottom: 1px solid #ddd;
		text-align: center;
	}
	span {
	  float: right;
	}
	
	[v-cloak] {
	  display: none;
	}
  </style>
  
<body>
<div id="app">
	<p>瓜瓜跑步圈数</p>
	今天是：<input type="text" v-on:binding="getCurrentTime">
	<button type="button" onclick="displayDate()">显示日期</button>
    <table>
		<tr>
			<th>序号</th>
			<th>圈数</th>
		</tr>
		<tr  v-for="quanshu in quanshus" :key="quanshu.id">
			<td>{{ quanshu.id }}</td>
			<td>{{ quanshu.meitang }}</td>
		</tr>
	</table>
	<span>总圈数：{{ totalQuan }}</span>
</div>


<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
		 quanshus:
		 [
			 {id: 1, meitang: 0.9},
			 {id: 2, meitang: 2},
			 {id: 2.1, meitang: 0.3}
		 ],
	 }
	},
	methods: {
		 displayDate(){
  document.getElementById("app").innerHTML=Date()
		}
	},
	computed: {
		totalQuan() {
			let total = 0;
			for(let quanshu of this.quanshus) {
				total += quanshu.meitang
			}
			return total;
		}
	}
		
	
 }).mount('#app')

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