在 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