vue3 执行js的方法
时间: 2023-12-07 13:16:51 浏览: 32
在Vue 3中执行JavaScript方法的方式与Vue 2相同,可以使用Vue组件的methods选项或直接在模板中调用JavaScript方法。
例如,在Vue组件的methods选项中定义一个JavaScript方法,并在模板中调用它:
```
<template>
<button @click="myMethod">Click me!</button>
</template>
<script>
export default {
methods: {
myMethod() {
console.log('This is my method!');
}
}
}
</script>
```
也可以在模板中直接调用JavaScript方法:
```
<template>
<button @click="consoleLog('Hello, world!')">Click me!</button>
</template>
<script>
export default {
methods: {
consoleLog(message) {
console.log(message);
}
}
}
</script>
```
在这个例子中,模板中的@click事件会调用组件的consoleLog方法,并将字符串'Hello, world!'作为参数传递给它。
需要注意的是,在模板中直接调用JavaScript方法可能会影响组件的性能和可维护性。因此,建议将常见的逻辑封装在组件的methods选项中,并在模板中调用它们。