設定輸入值和值

我試試這個內容混合：設定輸入值和值

<input type="text" 
    name="username" 
    v-model="user.name" 
    :value="'The user name is: '+user.name">

可能以某種方式表現在提交的輸入「用戶名是：李四」？

或者我需要在這種情況下明確使用計算值？

來源

2017-06-30 netdjw

可以使用佔位符 –

你能告訴我一個代碼嗎？ – netdjw

由於您使用的是V模型，佔位符文本將不會顯示，直到輸入字段爲空。對此，Sry，但是你期望的確切用例是什麼，因爲你不想顯示用戶名在用戶名輸入字段右邊？ –

你在問什麼（我認爲）它有點令人困惑，因爲你基本上說你想讓文本框包含像「用戶名是：Bob」這樣的文本，但是你想讓user.name等於「Bob」即使在用戶將文本框值編輯爲某些文本時甚至可能不以「用戶名爲：」開頭。

現實文本「的用戶名是：」不應該出現在文本框的話，那應該是一個<label>：

<label>The user name is:</label> 
    <input type="text" name="username" v-model="user.name">

您還可以使用CSS創建自己的自定義「輸入」元素其中包含一個<label>和一個<input>元素，刪除了所有樣式，因此它看起來像文本「用戶名是：」是可編輯文本的一部分，但實際上不是。

來源

2017-06-30 13:36:18

其實我不是說:)我有一個數據模型'data.user.name'，它從其他地方更新。我只想在該字段中顯示「用戶名是{{user.name}}」。所有文本都需要在輸入字段值中。 – netdjw

在這種情況下，您只需刪除'v-model'並使用'：value'綁定即可。 –

的選擇似乎是直接綁定到值，而不是V型，或創建一個計算性能和v-模式是：

https://codepen.io/aprouja1/pen/jwxagE

new Vue({ 
    el:'#app', 
    data(){ 
    return{ 
     user:{ 
     name:'Bob' 
     } 
    } 
    }, 
    computed:{ 
    nameString(){ 
     return `The user name is: ${this.user.name}` 
    } 
    } 
})

來源

2017-07-04 01:20:24 aprouja1

設定輸入值和值

回答

相關問題