vue如何利用单击事件输出当前时间？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue如何利用单击事件输出当前时间？相关的知识，希望对你有一定的参考价值。
如题
第一步，创建静态页面von.html，并引入vue.js关键的核心js文件，如下图所示：
第二步，在主题元素下插入div标签元素，并在其中插入一个input输入框和一个按钮，利用v-on指令绑定点击事件queryDate，如下图所示：
第三步，在div标签下方编写vue.js点击事件，事件是获取当前日期，如下图所示：
第四步，为了让输入框和按钮有间距，这里设置body元素样式，如下图所示：
第五步，预览该静态页面，然后点击按钮，发现输入框没有值，调试下发现错误，缺少jquery核心js文件，如下图所示：
第六步，引入jquery核心js文件后再次预览页面，并单击按钮，这时日期就显示在输入框
<html>
<script>
//获取当前时间
function getNowFormatDate()
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9)
month = "0" + month;
if (strDate >= 0 && strDate <= 9)
strDate = "0" + strDate;
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
//获取当前日期时间
function curentTime()
var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hh = now.getHours(); //时
var mm = now.getMinutes(); //分
var ss = now.getSeconds(); //分
var clock = year + "-";
if(month < 10)
clock += "0";
clock += month + "-";
if(day < 10)
clock += "0";
clock += day + " ";
if(hh < 10)
clock += "0";
clock += hh + ":";
if (mm < 10)
clock += '0';
clock += mm + ":";
if (ss < 10)
clock += '0';
clock += ss;
return clock;
//定时执行setTime
setInterval("setTime()",1000);
//将id为currentTime的div更新为最新时间
function setTime()
$('#currentTime').html(curentTime());
</script>
<p>我写入了日期时间<script>document.write(curentTime())<script></p>
<html> 参考技术B 你都有事件了 还怕不能输出东西？单击事件函数里面直接new Date（）就可以了啊
如何使用 vue.js 中的单击事件从数据表中删除行而不干扰计算函数
【中文标题】如何使用 vue.js 中的单击事件从数据表中删除行而不干扰计算函数【英文标题】：How to delete row from datatable without interfering a computed function using a click event in vue.js 【发布时间】：2020-10-12 20:46:19 【问题描述】：我正在使用 Vuetify 当前的 CRUD Datatable UI Component（与 Vue.js2 兼容）制作购物车。我之前遇到了一个问题，即通过将产品的数量乘以价格来计算产品的总和。幸运的是，通过使用计算函数 detailsWithSubTotal() 来计算总数并将数据表的 :item 值（以前为 "details"）替换为 :item="detailsWithSubTotal"，我得到了一个很好的解决方案，如下面的代码所示：
HTML
<template>
<v-layout align-start>
<v-flex>
<v-container grid-list-sm class="pa-4 white">
<v-layout row wrap>
<v-flex xs12 sm8 md8 lg8 xl8>
<v-text-field
v-model="code"
label="Barcode"
@keyup.enter="searchBarcode()"
>
</v-text-field>
</v-flex>
<v-flex xs12 sm12 md12 lg12 xl12>
<v-data-table
:headers="headerDetails"
:items="detailsWithSubTotal"
hide-default-footer
class="elevation-1"
>
<template v-slot:item.delete=" item ">
<v-icon small class="ml-3" @click="deleteDetail(detailsWithSubTotal, item)">
delete
</v-icon>
</template>
<template v-slot:no-data>
<h3>There are no current products added on details.</h3>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</template>
JAVASCRIPT
<script>
import axios from 'axios'
export default
data()
return
headerDetails: [
text: 'Remove', value: 'delete', sortable: false ,
text: 'Product', value: 'product', sortable: false ,
text: 'Quantity', value: 'quantity', sortable: false ,
text: 'Price', value: 'price', sortable: false ,
text: 'Subtotal', value: 'subtotal', sortable: false
],
details: [],
code: ''
,
computed:
detailsWithSubTotal()
return this.details.map((detail) => (
...detail,
subtotal: detail.quantity * detail.price
))
,
methods:
searchBarcode()
axios
.get('api/Products/SearchProductBarcode/' + this.code)
.then(function(response)
this.addDetail(response.data)
)
.catch(function(error)
console.log(error)
)
,
addDetail(data = [])
this.details.push(
idproduct: data['idproduct'],
product: data['name'],
quantity: 10,
price: 150
)
,
deleteDetail(arr,item)
var i= arr.indexOf(item);
if (i!==-1)
arr.splice(i,1);
,
</script>
虽然这有助于解决我之前的问题，但现在我无法删除添加的细节。
在将@click 事件中的数组参数保持为@click="deleteDetail(details, item) 并将数据表的:item 值保持为:items="details" 时，删除按钮可以正常工作，但是小计计算无法正常工作见下图：
但是当将数组参数替换为@click="deleteDetail(detailsWithSubTotal, item) 和:item 值替换为:items="detailsWithSubTotal" 时，它会计算小计但删除按钮停止工作。
如何在不干扰detailsWithSubTotal()计算函数的情况下删除数据表上添加的行？
【问题讨论】：
内部方法=deleteDetail，直接从数据属性中删除项目=this.details，而不是从计算属性中删除项目=detailsWithSubTotal，因为detailsWithSubTotal是@987654345的克隆@。检查MDN: Array.map，你会看到这样的描述：Array.map会创建一个新数组
【参考方案1】：
您可以尝试将detail 本身添加到计算项作为原始项的链接，并使用它从原始details 数组中删除：
detailsWithSubTotal()
return this.details.map((detail) => (
...detail,
subtotal: detail.quantity * detail.price,
source: detail
))
...
@click="deleteDetail(details, item)
...
deleteDetail(arr,item)
var i= arr.indexOf(item.source);
if (i!==-1)
arr.splice(i,1);
【讨论】：
我按照你说的试过了，效果很好！这正是我所需要的。非常感谢！我在哪里可以找到更多信息来解释有关将计算项目链接到原始项目的更多信息？ 这只是其中一种方法。另一种方法是为一个项目指明一个模板，然后直接在Subtotal单元格模板中计算sum。以上是关于vue如何利用单击事件输出当前时间？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 vue.js 中的单击事件从数据表中删除行而不干扰计算函数