Vue H5圖片放大縮小是網頁設計中的常用技巧。本文將介紹如何使用Vue H5實現這個功能。

首先，在HTML文件中插入一個img標簽：

<img src="your_image_file.png" class="zoom">

接著，在Vue H5中定義這個img元素：

<template>
<div>
<img src="your_image_file.png" class="zoom" :style="{transform: 'scale(' + scale + ')'}">
</div>
</template>
<script>
export default {
data() {
return {
scale: 1
}
},
methods: {
zoomIn() {
this.scale *= 1.1
},
zoomOut() {
this.scale /= 1.1
}
}
}
</script>

我們在Vue H5的data中定義了scale變量，并將img元素的transform屬性設置為scale(scale)。這個scale變量的初始值為1，即不進行縮放。我們還定義了兩個方法：zoomIn()和zoomOut()。當我們點擊放大按鈕時，這個方法會讓scale變量增加10%。當我們點擊縮小按鈕時，這個方法會讓scale變量減少10%。

最后，在CSS文件中定義.zoom類：

.zoom {
transition: all .2s ease-in-out;
touch-action: pinch-zoom;
}

這個.zoom類將img元素的transition屬性設置為.2秒，并在用戶在網頁上進行縮放時啟用pinch-zoom操作。這樣，在進行圖片縮放時，用戶體驗會更加流暢。

以上就是使用Vue H5實現圖片放大縮小的方法，希望對你有所幫助。