Vue如何实现双向绑定的

1.1单向操作：获取/设置input内容

<div id="app">
    <input type="text" v-bind:value="value" v-on:input="changeValue"> <!--输入即改变value值-->
    <p>{{ value }}</p> <!--用于显示当前value值-->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data:{
            value:"ccy"
        },
        methods:{
            changeValue: function(e){
                this.value = e.target.value;
            } // 改变value值
        }
    })
</script>

效果：

1.文本框的value原本为data中的value值，即用v-bind来设置input值；

2.文本框内容改变时，也改变了data的value值，显示在p标签中，即获取文本框值 两者均是单向操作；

1.2双向数据绑定：v-model

不需要在另外定义函数，将文本框的内容赋值到data的value上：

<div id="app">
    <input type="text" v-model="value">
    <p>{{ value }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data:{
            value:"ccy"
        }
    })
</script>

1.3用ref来标识input

另外补充一个获取input文本框的方法：ref input标签上注明ref：

<input type="text" v-bind:value="value" v-on:input="changeValue" ref = "input1">

在method中的changeValue函数中就可以找到这个input：

changeValue: function(){
            this.value = this.$refs.input1.value;
        }