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

【问题标题】：v-model input binding remove string after it has a space Vue.jsv-model 输入绑定删除字符串后有空格 Vue.js
【发布时间】：2017-10-26 06:03:15
【问题描述】：

我想在使用 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>

输入值将是诸如“Peter Parker”、“Bob Marley”等名称。

我希望 v-model 数据仅在打印到以下位置时才转换为名字：

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

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

然后在你的模板中使用它：

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

【讨论】：