javascript - 如何在Vue模板中使用javascript方法

Question

我正在尝试拆分 URL 的最后一个结尾来获取数值。它抛出一个错误。我有一段时间没有使用 vue 但我知道我们可以使用方法/函数来获得想要的结果？我哪里做错了？

<ul>
    <li  v-for="(character, index) in characters" :key="index">
     <router-link :to="'/characters'+ character.url.split("/").pop()">
        {{character.name}}
      </router-link>
    </li>
  </ul>

Answer 1

这是一个示例，希望对您有所帮助:

new Vue({
  el: '#app',
  data: {
    character: {
      url: 'https://jsonplaceholder.typicode.com/todos/101'
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-html="`/characters/${character.url.split('/').pop()}`"></div>
  <div> {{ `/characters/${character.url.split('/').pop()}` }}</div>
</div>

我使用字符串文字(模板文字或模板字符串)通过消除一些双/单引号和用于连接的 + 来保持代码干净。