vue中錨點(diǎn)的三種方法

第vue中錨點(diǎn)的三種方法liahref="#1"rel="externalnofollow"星期1/a/li

liahref="#2"rel="externalnofollow"星期2/a/li

liahref="#3"rel="externalnofollow"星期3/a/li

liahref="#4"rel="externalnofollow"星期4/a/li

liahref="#5"rel="externalnofollow"星期5/a/li

liahref="#6"rel="externalnofollow"星期6/a/li

liahref="#7"rel="externalnofollow"星期7/a/li

/ul

divid="1"11111111111111111111111111111111/div

divid="2"22222222222222222222222222222222222/div

divid="3"33333333333333333333333333333333333333/div

divid="4"444444444444444444444444444444444444444/div

divid="5"555555555555555555555555555555555555555/div

divid="6"666666666666666666666666666666666666666/div

divid="7"7777777777777777777777777777777777777777/div

/div

/template

script

exportdefault{

data(){

return{

/script

style

.list{

width:100%;

height:50px;

width:11%;

height:50px;

line-height:50px;

text-align:center;

border:1pxsolid#ccc;

color:#ff6c00;

float:left;

list-style:none!important;

.main_con{

width:100%;

height:200px;

border:1pxsolid#ccc;

line-height:200px;

text-align:center;

color:blue;

/style

第二種：

寫一個(gè)方法組件

template

div

divahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"@click="goAnchor('#anchor-'+index)"v-for="indexin20"{{index}}/a/div

div:id="'anchor-'+index"v-for="indexin20"{{index}}/div

/div

/template

script

exportdefault{

data(){

return{

methods:{

goAnchor(selector){

varanchor=this.$el.querySelector(selector)

document.documentElement.scrollTop=anchor.offsetTop

/script

style

.item{

width:100%;

height:200px;

line-height:200px;

text-align:center;

/style

第三種：自定義指令

template

div

divahref="javascript:void(0)"rel="externalnofollow"rel="externalnofollow"v-anchor="index"v-for="indexin20"{{index}}/a/div

div:id="'anchor-'+index"v-for="indexin20"{{index}}/div

/div

/template

script

exportdefault{

data(){

return{

/script

style

.item{

width:100%;

height:200px;

line-height:200px;

text-align:center;

/style

main.js定義全局指令方便其他地方復(fù)用

Vue.directive('anchor',{

inserted:function(el