vue语法---双向绑定

<template>

    {{ str }}
    <input type="text" @input="fn2" value="str">
    <!-- 先把str的值给输入框, 再监听input事件, 事件触发以后, 获取输入框的值 改变value -->
   
    <br>
    <!-- 第二个方式 -->
    {{ str2 }}
    <!-- 先把str2的值拿走, 给输入框, 再把输入框的值从事件对象里拿走 -->
    <input type="text" @input="str2 = $event.target.value" v-bind:value="str2">
    <!-- 第三, 箭头函数 -->
     <br>
     <input 
     type="text" 
     @input="
     (e)=>{
        console.log(1);
        str2 = e.target.value
     }
     ">
</template>

<script>
export default {
    data() {
        return {
            str: 1,
            str2: 2

        }
    },

    methods: {
        // 
        fn2(e) {
            console.log(e.target);
            console.log(e.target.value);
            this.str = e.target.value


        }
    },

    mounted() {

    },
}
</script>

<style lang="css"></style>