一般情況下,我們可以通過 JS 的方式獲取一個 img 元素的寬度。而在 Vue 中,我們可以利用 $refs 來獲取它的寬度。下面是示例代碼。
<template> <img ref="myImg" src="..." alt="..."> </template> <script> export default { methods: { getImageWidth() { const img = this.$refs.myImg; const width = img.clientWidth; console.log(width); } } } </script>
上面的代碼中,我們在 img 元素上設置了 ref 屬性,以便在 Vue 中使用它。在 method 中,我們通過 this.$refs.myImg 取得這個 img 元素,并用 clientWidth 獲取它的寬度,并打印輸出。
需要注意的是,獲取 img 寬度的前提是圖片已經加載完成,否則可能會獲取到 0。
下一篇vue獲取img