vue锚点的用法

一、锚点效果

 

二、示例

跳转到当前页面中指定的位置

<a href="#demo1">跳转到一的位置</a>
<a href="#demo2">>跳转到二的位置</a>
<a href="#demo3">>跳转到三的位置</a>



<div id="demo1">一</div>
<div id="demo2">二</div>
<div id="demo3">三</div>

三、项目中的使用

这里有将页面封装成组件

<span v-for="tag in tagList">
   <a class="index_tag_item" :href="'#'+tag.id">{{tag.name}}</a>
</span>


<div class="dim_grop" >
  <div class="dim_section" id="c1"><qxsc></qxsc></div>
  <div class="dim_section" id="c2"><qxcpzc></qxcpzc></div>
  <div class="dim_section" id="c3"><cpjdcj></cpjdcj></div>
  <div class="dim_section" id="c4"><rcjdjc></rcjdjc></div>
  <div class="dim_section" id="c5"><xcjc></xcjc></div>
  <div class="dim_section" id="c6"><qydj></qydj></div>
  <div class="dim_section" id="c7"><gdbb></gdbb></div>
  <div class="dim_section" id="c8"><tsjb></tsjb></div>
  <div class="dim_section" id="c9"><xzcf></xzcf></div>
  <div class="dim_section" id="c10"><wtsc></wtsc></div>
  <div class="dim_section" id="c11"><bljl></bljl></div>
  <div class="dim_section" id="c12"><scqk></scqk></div>
  <div class="dim_section" id="c13"><ndxxdj></ndxxdj></div>
  <div class="dim_section" id="c14"><sms></sms></div>
  <div class="dim_section" id="c15"><cpzc></cpzc></div>
  <div class="dim_section" id="c16"><cpzh></cpzh></div>
  <div class="dim_section" id="c17"><xydj></xydj></div>
  <div class="dim_section" id="c18"><xybg></xybg></div>
</div>

export default {
  name: 'corpIndex',
  components:{//私有组件页面
    IndexHome,
    Xydj,
    Cpzh,
    Cpzc,
    Sms,
    Ndxxdj,
    Scqk,
    Bljl,
    Wtsc,
    Xybg,
    Xzcf,
    Tsjb,
    Gdbb,
    Qydj,
    Xcjc,
    Rcjdjc,
    Cpjdcj,
    Qxcpzc,
    Qxsc,
  },
  data(){
    return{
      tagList:[{
        id:'c1',
        name:'标题1',
      },{
        id:'c2',
        name:'标题2',
      },{
        id:'c3',
        name:'标题3',
      },{
        id:'c4',
        name:'标题4',
      },{
        id:'c5',
        name:'标题5',
      },{
        id:'c6',
        name:'标题6',
      },{
        id:'c7',
        name:'标题7',
      },{
        id:'c8',
        name:'标题8',
      },{
        id:'c9',
        name:'标题9',
      },{
        id:'c10',
        name:'标题10',
      },{
        id:'c11',
        name:'标题11',
      },{
        id:'c12',
        name:'标题12',
      },{
        id:'c13',
        name:'标题13',
      },{
        id:'c14',
        name:'标题14',
      },{
        id:'c15',
        name:'标题15',
      },{
        id:'c16',
        name:'标题16',
      },{
        id:'c17',
        name:'标题17',
      },{
        id:'c18',
        name:'标题18',
      }],
    }
  },
}