vue2锚点双向绑定

Vue 2中，可以使用`v-model`指令实现双向数据绑定。对于锚点（即页面上的锚点链接），可以通过绑定`window.location.hash`属性来实现双向绑定。

首先，在Vue实例中定义一个数据属性来存储当前的锚点值，比如`currentAnchor`。然后，在锚点链接中，使用`v-bind:href`指令将锚点值绑定到`window.location.hash`。同时，在锚点链接上监听`click`事件，当点击时更新`currentAnchor`的值。

下面是一个示例代码：

<div id="app">
  <ul>
    <li v-for="anchor in anchors" :key="anchor">
      <a :href="'#' + anchor" @click="updateAnchor(anchor)">{{ anchor }}</a>
    </li>
  </ul>
  
  <div>
    <input type="text" v-model="currentAnchor">
  </div>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    currentAnchor: '',
    anchors: ['anchor1', 'anchor2', 'anchor3']
  },
  mounted() {
    window.addEventListener('hashchange', this.updateCurrentAnchor);
    this.updateCurrentAnchor();
  },
  destroyed() {
    window.removeEventListener('hashchange', this.updateCurrentAnchor);
  },
  methods: {
    updateAnchor(newAnchor) {
      this.currentAnchor = newAnchor;
    },
    updateCurrentAnchor() {
      this.currentAnchor = window.location.hash.slice(1);
    }
  }
});
</script>

在上述代码中，`anchors`数组存储了需要添加锚点的值，通过`v-for`指令遍历生成锚点链接。当点击链接时，会调用`updateAnchor`方法更新`currentAnchor`的值。同时，通过监听`window`对象的`hashchange`事件，调用`updateCurrentAnchor`方法来更新`currentAnchor`的值。

这样，输入框中的值与页面上的锚点链接的值就实现了双向绑定。当修改输入框中的值时，锚点链接也会相应地更新；当点击锚点链接时，输入框中的值也会更新。