<!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>
应该怎么改？