}
}
}
</script>
<style>
.item{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
第三种： 自定义指令
<template>
<div>
<div><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-anchor="index" v-for="index in 20"> {{index}} </a></div>
<div :id="'anchor-'+index" class="item" v-for="index in 20" >{{index}}</div>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>
<style>
.item{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>main.js 定义全局指令 方便其他地方复用
Vue.directive('anchor',{
inserted : function(el,binding){
el.onclick = function(){
document.documentElement.scrollTop = $('#anchor-'+binding.value).offset().top
}
}
})总结
以上所述是小编给大家介绍的vue中锚点的三种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
