v模型輸入綁定它有一個空格後刪除字符串Vue.js

Question

我想刪除部分字符串時，使用v模型輸入綁定添加空間。例如，我有以下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>