ref
ref作用
在一般的JavaScript
中,如果想要获取到某个DOM
,是这样编写代码的:
var item=document.getElementById("item");
// ...其它代码
通过获取到某个DOM
,可以修改其样式、innerHTML
(这部分内容可以参见6_变量
)等,而在Vue
中可以使用ref
来代替:
var item=this.$refs.item;
修改样式
<template>
<button @click="fun">按钮</button>
<div style="opacity: 0" class="item" ref="item"></div>
</template>
<script>
export default {
methods: {
fun(){
this.$refs.item.style.opacity=1;
}
}
}
</script>
滚动
使用ref可以让一个DOM滚动
this.$refs.Element.scrollTo({
top: 100, // 滚动到距离顶部100像素
behavior: 'smooth',
})