如何在 v-model 给出的数据后插入“/km”文本？

Question

我将 vuetify 用于文本字段。使用 v-model 我显示对象给出的文本。

例如：我有一个名为“距离”的对象，对象的值为“50”，在前端我使用v-model来显示“距离”的数据。

问题：我想在 text/data 显示文本字段 w/o 后添加“/km”，影响“距离”的实际数据。

文本字段显示为“50”我想将其设置为“50/km”

Answer 1

你可以用computed格式化，这里是一个例子：

<template>
  <input v-model="test" />
</template>

<script>
export default { 
  computed: {
    test() {
      return this.yourdata + '/km'
    }
  } 
}
</script>

Answer 2

这是一个完整的示例，只需将其放入 html 文件并在任何浏览器中打开即可：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Test-Vue</title>
</head>
<body>
<div id="app">
    <input v-model="distance">/km<br/>
    {{distanceWithKm}}
</div>
</body>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            distance: '50'
        },
        computed: {
            distanceWithKm() {
                return this.distance + "/km"
            }
        }
    })
</script>
</html>

如何在 v-model 给出的数据后插入“/km”文本？

How can I insert "/km" text after the data given from v-model?

javascript

vue.js

vuetify.js