給圖片設(shè)置尺寸是前端開發(fā)中經(jīng)常會遇到的問題，無論是在網(wǎng)頁制作中還是在移動端開發(fā)中都需要注意。Vue作為一種流行的前端框架，也提供了設(shè)置圖片尺寸的方法。

在Vue中，我們可以使用img標(biāo)簽來向頁面添加圖片。使用img標(biāo)簽，就可以通過設(shè)置其長寬自定義圖片的尺寸。下面我們來看看如何使用Vue來設(shè)置圖片的長寬。

<template>
<div>
<img :src="url" :width="width" :height="height">
</div>
</template>
<script>
export default {
data() {
return {
url: "https://picsum.photos/200/300",
width: 100,
height: 150
};
}
};
</script>

在上面的代碼中，我們使用了Vue的數(shù)據(jù)綁定語法來綁定了圖片的width和height屬性。在data選項中定義了初始值為100和150的寬高值，這樣圖片就會顯示為100x150的大小。

如果想要動態(tài)設(shè)置圖片的寬高，也可以使用Vue的計算屬性來進行計算。下面看一個示例：

<template>
<div>
<img :src="url" :width="size" :height="size * 1.5">
</div>
</template>
<script>
export default {
data() {
return {
url: "https://picsum.photos/200/300",
width: 200,
height: 300
}
},
computed: {
size() {
return this.width / 2;
}
}
};
</script>

在上面的代碼中，我們使用了計算屬性size來設(shè)置圖片的寬高值。在計算屬性中，我們將圖片的寬度除以2，計算出圖片的大小，從而設(shè)置其寬高值。

除了上面介紹的這種方式，還可以通過CSS來設(shè)置圖片的寬高。我們可以為img標(biāo)簽設(shè)置CSS樣式，從而達到設(shè)置圖片大小的效果。下面看一個示例：

<template>
<div>
<img :src="url" class="img-size">
</div>
</template>
<style>
.img-size {
width: 200px;
height: 300px;
}
</style>

在上面的代碼中，我們在img標(biāo)簽中為其添加了class屬性，并通過CSS來設(shè)置了img-size類的寬高值，這樣圖片就會顯示為200x300的大小。

總的來說，在Vue中設(shè)置圖片的長寬有多種方式，我們可以根據(jù)具體情況選擇相應(yīng)的方式。如果想要動態(tài)設(shè)置圖片的大小，可以使用Vue的數(shù)據(jù)綁定語法或計算屬性，如果不需要動態(tài)設(shè)置，可以使用CSS來設(shè)置。