代码之家 › 专栏 › 技术社区 › BaronGrivet

如何使用过滤/转换的数据在Vuejs中创建可单击的锚标记

vuejs2 vue.js

BaronGrivet · 技术社区 · 7 年前

我有一个VueJS应用程序,它具有以下(外部提供的)数据样式:

data: function() {
  return {
    posts: ['1:foo bar oof rab', '2:bar oof rab foo', '3:oof rab foo bar']
  }
}

我希望我的模板循环浏览帖子,并使分号左侧的所有内容都成为可单击的锚标记:

<li><a id="1" href="#1">1</a>:foo bar oof rab</li>
<li><a id="2" href="#2">2</a>:bar oof rab foo</li>
<li><a id="3" href="#3">3</a>:oof rab foo bar</li>

使用过滤器可以很容易地将文本从定位点位置拆分:

<template>
  <div>
    <v-for="post in posts">
      <li>{{ post | trimAnchor }}:{{ post | trimPost }}</li>
    </v-for>
  </div>
</template>

filters: {
  trimPost: function(value) {
    value = value.toString();
    return value.split(':')[1]
  },
  trimAnchor: function(value) {
    value = value.toString();
    return value.split(':')[0]
  },
  hashAnchor: function(value) {
    value = value.toString();
    return '#'+value.split(':')[0]
  }

但是过滤器在v-bind或路由器链接中不起作用:

<li>
  <div :id="{{ post | hashAnchor }}">
    <router-link="{{ post | hashAnchor }}">
      {{ post | trimAnchor }}
    </router-link>
  </div>
  :{{ post | trimPost }}
</li>

获得我想要的输出的正确方法是什么?我应该用吗 computed &如果是,如何处理?

感谢您的帮助。

1 回复 | 直到 7 年前

Sumurai8 7 年前

在这种情况下,我总是建议使用计算属性。它使您的模板保持干净,并允许在准备数据时有很大的自由。由于它是一个计算属性,所以如果要更改数据,它将自动重新计算。

第一部分是用您需要的所有必要部分创建一些对象:

computed: {
  anchors () {
    if (!this.posts) {
      return [];
    }

    return this.posts.map(
      identifier => {
        const [anchor, text] = identifier.split(':', 2);

        return {
          anchor,
          text
        }
      }
    )
  }
}

然后在你需要的地方摧毁它。我还为您的V-for添加了一个键,假设第一部分保证是唯一的。如果你的锚能工作的话就需要了。

<template>
  <div>
    <v-for="{ anchor, text } in anchors" :key="anchor">
      <li><a :href="`#${anchor}`">{{ anchor }}</a>:{{ text }}</li>
    </v-for>
  </div>
</template>

当然,如果需要,可以在链接上使用过滤器,如果需要,可以使用li主体。

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

4 年前

Park · Vuejs道具,路径较长

4 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

4 年前

roev · 大堆来自(物体)。forEach不使用vue。js

4 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

8 年前

Ready Dev · Axios一次发出多个请求(vue.js)

8 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

8 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

8 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

8 年前

Tim · VueJS-迭代从AJAX调用返回的数据

8 年前