Для изменения стиля изображения при клике в Vue.js вы можете использовать директиву v-bind или v-bind:class в сочетании с обработчиком события @click. Давайте разберемся с примером.
Первоначально вам потребуется импортировать Vue.js и создать экземпляр Vue:
<!DOCTYPE html>
<html>
<head>
<title>Изменение стиля изображения при клике в Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img
:src="image"
:class="{ 'highlighted': isClicked }"
@click="changeStyle"
/>
</div>
<script>
new Vue({
el: '#app',
data: {
image: 'path/to/image.jpg',
isClicked: false,
},
methods: {
changeStyle() {
this.isClicked = !this.isClicked;
},
},
});
</script>
<style>
.highlighted {
border: 2px solid red;
/* Другие стили, которые вы хотите применить при клике */
}
</style>
</body>
</html>
В этом примере мы создаем экземпляр Vue и определяем его внутри элемента с id "app". У нас есть свойство image, которое содержит путь к изображению, и свойство isClicked, которое указывает на то, было ли изображение кликнуто.
В элементе <img> мы используем директиву v-bind для связывания свойства src с переменной image, чтобы отобразить изображение. Также мы используем директиву v-bind:class для связывания свойства класса с объектом, где ключ "highlighted" будет добавлен к классу, когда isClicked равно true.
Мы также добавляем обработчик события @click для элемента <img>, который вызывает метод changeStyle при клике. В этом методе мы изменяем значение isClicked на противоположное, чтобы переключать стиль изображения при каждом клике.
В CSS мы определяем класс .highlighted, где мы можем добавить стили, которые хотим применить к изображению при клике.
Таким образом, при клике на изображение, класс "highlighted" будет добавлен к списку классов, и стиль изображения будет изменен согласно определенным стилям для этого класса. При повторном клике класс будет удален, и стиль вернется в первоначальное состояние.