javascript - Können Eingaben nicht gleichzeitig verwendet werden: Wert und V-Modell?

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>

Ich möchte, dass die Eingabe zunächst den Wert in Info anzeigt, und dann kann ich den Wert des V-Modells verwenden, aber der Effekt kann nicht erzielt werden. Der Wert der Info wird nicht angezeigt. Ist es falsch, so zu schreiben? Wie soll ich schreiben, um meine Bedürfnisse zu erfüllen?

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/...