javascript - input 是不是不能同時用：value和v-model

Question

<template>
    <p id="login">
        <p>
            用户: <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的值，但是不能達到效果。 info的值並沒有顯示出來。請問這樣寫是不是錯的？要實現我的需求該怎麼寫？

Answer 1

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

反正是雙向的，何必多出來呢。

Answer 2

建議把v-bind:value去掉，直接把info.name和info.psd寫到v-model上面，程式碼如下：

<template>
    <p id="login">
        <p>
            用户: <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>

當input的value改變的時候，username和password也就改變了

Answer 3

v-model 是 v-bind:input 和 v-bind:value 的語法糖。

Answer 4

已解決，用一個input和一個p配合即可

Answer 5

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