vue锚点功能

---

前言

vue中使用锚点

一、渲染数据

1.vue中循环渲染点击的数据

		<li v-for="(item, index) in weeklyData.otherWeeklys" :key="index">
          <a :class="item.status === 2 ? 'memberChange' : 'member'" @click="changeHash(item.id)">
            {{ item.name }}
          </a>
        </li>

注：需将id传入函数中

2.渲染跳转到的数据

<nav v-for="item in weeklyData.otherWeeklys" :id="item.id" :key="item.id">
    <div>
      {{ item.name }}
      <span style="margin-left:30px;color:#999999">
        <el-tag
          :type="
            item.status == 0
              ? 'init'
              : item.status == 1
              ? 'warning'
              : item.status == 2
              ? 'success'
              : ''
          "
          size="mini"
          effect="light"
          :hit="false"
        >
          {{ item.statusName }}
        </el-tag>
        <!--{{ item.statusName }}-->
      </span>
    </div>
 </nav>

注：渲染跳转到的数据时将id，绑在跳转的标签上

3.JS方法

JS代码如下（示例）：

// 使用document.querySelector实现锚点的效果
    changeHash(id) {
      document.getElementById(id).scrollIntoView(true)
    },

提示：以上是本篇文章全部内容，案例可供参考