javascript - Can input not be used at the same time: value and 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>

I want the input to initially display the value in info, and then I can use the value of v-model, but the effect cannot be achieved. The value of info is not displayed. Is it wrong to write this way? How should I write to achieve my needs?

Answer 1

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

It’s two-way anyway, why bother adding more.

Answer 2

It is recommended to remove v-bind:value and write info.name and info.psd directly to v-model. The code is as follows:

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

When the value of the input changes, the username and password also change

Answer 3

v-model is the syntax sugar for v-bind:input and v-bind:value.

Answer 4

Solved, just use an input and a p

Answer 5

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