v-model 输入绑定在字符串具有空格 Vue.js 后删除字符串

Question

我想在使用 v-model 输入绑定添加空格时删除字符串的一部分。例如，我有以下 Vue 设置：

<template>
  <input v-model="customerName" placeholder="edit me">
  <p>Message is: {{ customerName }}</p>
</template>
<script>
export default {
  name: 'conversation-app',
  data () {
    return {
      customerName: '',
    }
  },
}
</script>

输入值将是诸如"彼得·帕克"、"鲍勃·马利"等名称。

我希望 v 模型数据仅在打印成以下位置时才转换为名字：

<p>Message is: {{ customerName }}</p>

Answer 1

创建一个名为 firstName 的计算属性，该属性返回包含第一个空格之前的字母的customerName段：

computed: {
  firstName() {
    return this.customerName.split(' ')[0];
  }
}

然后在模板中使用它：

<p>Message is: {{ firstName }}</p>