Как переделать это код на vue js? [дубликат]
86
30 марта 2021, 18:10
На этот вопрос уже дан ответ здесь:
vue js скрыть Input при клике на кнопку
(1 ответ)
Закрыт 1 год назад.
Есть код на jquery который при клике на элемент меняет значение display другого элемента:
$('.header__user-image').click( function(){
$('.header__list').toggleClass('header__list_active');
});
Как переделать этот код на Vue.js, и куда его вставлять? ( в main.js или в Component.vue ? )
Answer 1
const app = new Vue({
el: '#app',
data: {
active: true,
},
methods: {
example(){
this.active = !this.active;
console.log(this.active);
},
},
}).blue{
color:blue;
}
.red{
color:red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<div
@click="example"
>
<span
:class="{blue:active, red:!active}"
>
Привет
</span>
<div>
</template>
</div>Документация.
Answer 2
Где то в разметке:
Элемент, по которому надо кликнуть:
<img @click="myFuncton" />
Элемент, которому надо поменять класс:
<div ref='myElement'></div>
Где то в vue:
...
methods: {
myFunction(){
this.$refs.myElement.toggleClass('header__list_active');
}
}
...
-
08:01
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
-
19:16
-
07:17
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46629 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30277 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22799 visits
- Как через css изменить цвет png изображения? 10159 visits
- Blob video url download 9798 visits
- Php curl запрос через прокси с авторизацией 9056 visits
- Работа с captcha vk api 7974 visits
© "hostciti.net" 20.4.2024 | 14:24