在 Vue 的 methods 方法中使用 addEventListener时,你可以使用
箭头函数
来访问 Vue 实例的数据。
箭头函数不会创建自己的作用域,而是继承父级作用域的上下文
。以下是一个示例:
<
template
>
<
button
@click
="attachEventListener"
>
Click Me
</
button
>
</
template
>
<
script
>
export
default
{
data() {
return
{
vuedata:
"
Hello, World!
"
methods: {
attachEventListener() {
const button
=
document.querySelector(
"
button
"
);
button.addEventListener(
"
click
"
, ()
=>
{
console.log(
this
.vuedata);
//
在addEventListener的匿名函数中访问Vue实例的数据
</
script
>
在这个示例中,我们在 Vue 的 methods 方法中定义了一个 attachEventListener 方法。
在该方法中,我们使用 addEventListener 来给按钮绑定了一个点击事件。
在 addEventListener 的匿名函数中,我们使用箭头函数来访问 Vue 实例的数据,通过 this 关键字来获取 vue data 的值。当点击按钮时,控制台将输出"Hello, World!"。
Cool:
图片取色工具
Link:
https://www.cnblogs.com/farwish/p/17517772.html