問(wèn)題描述

<template> <p id='login'><p> 用戶(hù): <input type='text' v-model='username' :value=’info.name’> 密碼: <input type ='text' v-model='password' :value=’info.psd’></p> </p></template><script> export default{name:’login’,data(){ return{username:’’,password:’’,info:{ name:’123’, psd:’123’,}, }}, }</script>

我想讓input最初顯示的是info里面的值，然后可以用v-model的值，但是不能達(dá)到效果。info的值并沒(méi)有顯示出來(lái)。請(qǐng)問(wèn)這樣寫(xiě)是不是錯(cuò)的？要實(shí)現(xiàn)我的需求應(yīng)該怎么寫(xiě)？

問(wèn)題解答

return{username:’123’,password:’123’, }

反正是雙向的，何必多出來(lái)呢。

建議把v-bind:value去掉，直接把info.name和info.psd寫(xiě)到v-model上面，代碼如下：

<template> <p id='login'><p> 用戶(hù): <input type='text' v-model='username'> 密碼: <input type ='text' v-model='password'></p> </p></template><script> export default{name:’login’,data(){ return{username:’123’,password:’123’,info:{ name:’123’, psd:’123’,}, }}, }</script>

當(dāng)input的value改變的時(shí)候，username和password也就改變了

v-model 就是 v-bind:input 和 v-bind:value 的語(yǔ)法糖。

已解決，用一個(gè)input和一個(gè)p配合即可

https://jsfiddle.net/stardew/...