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>

输入值将是“Peter Parker”，“Bob Marley”等名称。

我希望v模型数据只有在打印成时才能转换为名字：

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

Answer 1

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

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

然后在模板中使用它：

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

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

1 个答案: