在前端開發中，經常需要修改元素的位置，Vue也提供了相應的方法來實現元素位置的調整。下面介紹一些方法可以幫助您輕松地修改元素的位置。

//HTML代碼
// CSS代碼
.container {
position: relative;
width: 400px;
height: 400px;
background-color: #f5f5f5;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: 0;
top: 0;
}

這是一個簡單的HTML + CSS代碼，包括一個完整的容器和一個紅色的方塊。我們在Vue中使用ref來獲取這個方塊的引用，并使用$el來獲取DOM元素實例。如下所示：

//Vue代碼
new Vue({
el: '#app',
mounted () {
// 獲取容器的引用
const container = this.$el.querySelector('.container')
// 獲取方塊的引用
const box = this.$refs.box.$el
// 修改方塊的位置
box.style.left = container.offsetWidth - box.offsetWidth + 'px'
box.style.top = container.offsetHeight - box.offsetHeight + 'px'
}
})

在這里，我們使用了mounted鉤子函數，因為我們需要首先更新DOM之后才能獲取容器的寬度和高度。使用container.offsetWidth - box.offsetWidth和container.offsetHeight - box.offsetHeight，我們可以將方塊移到容器的右下角。

同樣的效果也可以使用計算屬性來實現：

//Vue代碼
new Vue({
el: '#app',
computed: {
boxPosition () {
// 獲取容器的引用
const container = this.$el.querySelector('.container')
// 獲取方塊的引用
const box = this.$refs.box.$el
// 計算方塊的位置
const left = container.offsetWidth - box.offsetWidth
const top = container.offsetHeight - box.offsetHeight
return { left, top }
}
}
})

我們使用計算屬性來計算方塊的位置，當容器的大小變化時，計算屬性也會自動更新。在HTML中使用v-bind綁定樣式，如下所示：

//HTML代碼

現在，我們已經成功地將紅色的方塊移動到了容器的右下角。