javascript - L'entrée ne peut-elle pas être utilisée en même temps : valeur et modèle V ?

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>

Je souhaite que l'entrée affiche initialement la valeur dans info, puis je peux utiliser la valeur du v-model, mais l'effet ne peut pas être obtenu. La valeur de l'info n'est pas affichée. Est-ce mal d'écrire de cette façon ? Comment dois-je écrire pour répondre à mes besoins ?

Answer 1

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

C’est bidirectionnel de toute façon, pourquoi s’embêter à en ajouter davantage.

Answer 2

Il est recommandé de supprimer v-bind:value et d'écrire info.name et info.psd directement dans v-model. Le code est le suivant :

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

Lorsque la valeur de l'entrée change, le nom d'utilisateur et le mot de passe changent également

Answer 3

v-model est le sucre de syntaxe pour v-bind:input et v-bind:value.

Answer 4

Résolu, utilisez simplement une entrée et un p

Answer 5

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