在Vue中，我們可以通過指令和方法來實現div元素的縮放功能。下面是一個簡單的示例：

// template部分
<div v-bind:style="{ transform: `scale(${scale})` }">
// ...content...
</div>
// script部分
data() {
return {
scale: 1
}
},
methods: {
zoomIn() {
this.scale += 0.1;
},
zoomOut() {
this.scale -= 0.1;
}
}

上面的代碼中，我們通過指令v-bind來綁定元素的樣式。通過JS表達式來設置縮放比例，實現縮放的效果。在data中定義了一個scale變量，用來控制縮放大小。在methods中定義了兩個方法，用來增加和減少縮放。

接下來，我們可以通過按鈕等交互來調用上面定義的方法，并實現動態的縮放效果。以下是完整的代碼：

<template>
<div>
<div v-bind:style="{ transform: `scale(${scale})` }">
<p>這是一個內容頁</p>
</div>
<div>
<button @click="zoomIn">放大</button>
<button @click="zoomOut">縮小</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
scale: 1
}
},
methods: {
zoomIn() {
this.scale += 0.1;
},
zoomOut() {
this.scale -= 0.1;
}
}
}
</script>

最終的效果是當我們點擊放大或縮小按鈕時，內容頁會動態地放大或縮小。該功能可以應用于許多場景，例如展示圖片、視頻等時，用戶可以通過縮放來調整尺寸，使其更符合自己的需求。