Vue2.0中獲取dom元素
阿新 • • 發佈:2018-11-19
Vue.js雖然說是資料驅動頁面的,但是有時候我們也要獲取dom物件進行一些操作。
vue的不同版本獲取dom物件的方法不一樣
Vue.js 1.0版本中,通過v-el繫結,然後通過this.els.XXX來獲取
Vue.js 2.0版本中。我們通過給元素繫結ref=“XXX”,然後通過this.$refs.XXX或者this.refs['XXX']來獲取
以2.0為例:
<template>
<section>
<div ref="hello">
< h1>Hello World ~</h1>
</div>
<el-button type="danger" @click="get">點選</el-button>
</section>
</template>
<script>
export default {
methods: {
get() {
console.log(this.$refs['hello']);
console.log(this.$refs.hello);
}
}
}
</script>
vue中操作dom需要謹慎,尤其是新增或刪除dom的時候,特別是mounted()和created()的時候,此時dom物件還沒有生成,要放在this.nextTick()的回撥函式中。
嗯,就醬~~