Vue是一款優秀的前端框架,提供了方便的元素獲取方法,使得開發者可以輕松地對DOM元素進行操作。以下是使用Vue獲取元素的方法。
通過模板引用獲取元素:
<template>
<div>
<button ref="myBtn">Click Me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log(this.$refs.myBtn) // 輸出獲取到的元素節點
}
}
}
</script>
通過Vue實例訪問獲取元素:
<template>
<div id="app"></div>
</template>
<script>
import Vue from 'vue';
export default {
mounted() {
const app = new Vue({
el: '#app'
});
console.log(app.$el); // 獲取已掛載元素
}
}
</script>
使用$refs獲取元素:
<template>
<div>
<button ref="myBtn">Click Me</button>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myBtn); // 獲取按鈕元素
}
}
</script>
上一篇vue獲取值
下一篇css能清除輸入框的緩存