在Vue中，我們可以通過自定義指令來修改元素的顯示比例，使其適應不同尺寸的屏幕。下面我們將具體介紹如何實現。

Vue.directive('resize', {
bind: function(el, binding) {
function resize() {
let value = binding.value.split(':')
let ratio = value[0] / value[1]
let width = el.offsetWidth
el.style.height = width * ratio + 'px'
}
resize()
window.addEventListener('resize', resize)
},
unbind: function(el) {
window.removeEventListener('resize', el.resize)
}
})

代碼中我們定義了一個名為resize的指令，通過bind函數綁定到元素上。在指令的回調函數中，我們獲取指令的參數，即寬高比，然后根據元素的寬度和寬高比計算出元素的高度，最后通過設置樣式修改元素的顯示比例。同時，我們也添加了一個resize事件監聽器，當屏幕尺寸改變時會自動調整元素的大小。

在HTML中，我們可以通過v-resize指令來使用自定義指令。下面是一個簡單的例子：

Resize me

在這個例子中，我們給一個div元素添加了v-resize指令，指定寬高比為16:9。當div元素加載時，指令會自動計算并修改元素的顯示比例，使其始終保持16:9的寬高比。

除了直接指定寬高比外，我們也可以利用Vue的計算屬性來動態計算寬高比。下面是一個例子：

{{ text }}
data: {
text: 'Resize me',
width: 640,
height: 480
},
computed: {
aspectRatio: function() {
return this.width + ':' + this.height
}
}

在這個例子中，我們利用計算屬性aspectRatio動態計算寬高比，然后將其通過v-resize指令傳遞給元素。當width或height變化時，計算屬性會自動重新計算寬高比并更新元素的顯示比例。

總之，通過自定義指令和計算屬性，我們可以靈活地修改元素的顯示比例，使其適應不同尺寸的屏幕，從而提升用戶體驗和美觀度。