2021-07-02 vue的双向绑定与事件绑定

1.单向绑定/双向绑定

实现

输入第一个文本框,后面的文本框不受影响,输入第二或第三个文本框,所有文本框同步改变

代码

html

<div id="app">
    <!-- 单向绑定 -->
    <input type="text" :value="ipt">
    <!-- 双向绑定 -->
    <input type="text" v-model="ipt">
    <!-- 手动双向绑定 -->
    <input type="text" :value="ipt" @input="checkIpt">
</div>

js

let a = 12;
var vm = new Vue({
    el: "#app",
    data: {ipt: "输入"},
    methods: {
        checkIpt(eve) {this.ipt = eve.target.value;}
    }
})

效果

1.输入第一个文本框,后面的文本框不受影响

2.输入第二或第三个文本框,所有文本框同步改变

2.事件绑定

实现

给文本框绑定失去焦点事件并输出改变的内容

语法

v-on:click="methodName"
或
@click="methodName"

代码

html

<div id="app">
    <input type="text" @blur="fn">
</div>

js

new Vue({
    el: "#app",
    methods: {
        fn: function() {
            console.log("内容有改动:" + document.querySelector("input").value);
        }
    }
});

输出

内容有改动:hello