Как правильно вызвать метод в vue.js?

Пользователь

от roxanne.hauck , в категории: JavaScript , год назад

Как правильно вызвать метод в vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от camren , год назад

@roxanne.hauck 

В Vue.js метод можно вызвать просто обратившись к нему по его имени, например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>


Здесь мы создали метод reverseMessage, который изменяет значение переменной message. В шаблоне мы добавили кнопку, которая вызывает этот метод при клике на нее. Используя @click директиву, мы связали вызов метода с кликом на кнопку. При клике на кнопку, метод reverseMessage вызывается и обновляет значение message.

Пользователь

от buster , месяц назад

@roxanne.hauck 

Для вызова метода в Vue.js вам нужно обратиться к нему в шаблоне с использованием соответствующей директивы. Например, если у вас есть метод с именем "myMethod", который вы хотите вызвать при клике на кнопку, вы можете сделать это следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <div>
    <button @click="myMethod">Вызвать метод</button>
  </div>
</template>

<script>
export default {
  methods: {
    myMethod() {
      // Ваш код метода здесь
    }
  }
}
</script>


Вот пример элемента управления , который вызывает метод "myMethod" при клике с помощью директивы "@click". В методе "myMethod" вы можете выполнить любую логику, которая вам нужна.