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

Question

<template>
    <div id="login">
        <div>
            用户: <input type="text" v-model="username" :value='info.name'>
            密码: <input type ="text" v-model="password" :value='info.psd'>
        </div>
    </div>
</template>
<script>
    export default{
        name:'login',
        data(){
            return{
                username:'',
                password:'',
                info:{
                    name:'123',
                    psd:'123',
                },
            }
        },
    }
</script>

我想让input最初显示的是info里面的值，然后可以用v-model的值，但是不能达到效果。info的值并没有显示出来。请问这样写是不是错的？要实现我的需求应该怎么写？

Answer 1

已解决，用一个input和一个div配合即可

Answer 2

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

反正是双向的，何必多出来呢。

Answer 3

建议把v-bind:value去掉，直接把info.name和info.psd写到v-model上面，代码如下：

<template>
    <div id="login">
        <div>
            用户: <input type="text" v-model="username">
            密码: <input type ="text" v-model="password">
        </div>
    </div>
</template>
<script>
    export default{
        name:'login',
        data(){
            return{
                username:'123',
                password:'123',
                info:{
                    name:'123',
                    psd:'123',
                },
            }
        },
    }
</script>

当input的value改变的时候，username和password也就改变了

Answer 4

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

Answer 5

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