当前位置：首页 > article >正文

vue语法---09双向数据绑定

article 2025/2/23 23:11:40

双向绑定数据实现了数据和视图之间的自动同步, 数据变化时, 视图自动更新, 视图变化时, 数据也随之更新

通过v-model指令实现

<template>
    {{message}}
        <input v-model="message" />

</template>
    
<script>
    export default{
        data() {
            return {
                message:"helloworld"
            }
        },
    }
</script>
    
<style>
    
</style>

在属性绑定中讲过v-bind指令, 这只是单向绑定

<template>
        {{str}}
        <input type="text" v-bind:value="str">
</template>
    
<script >
    export default{
        data() {
            return {
                str:"文字"
            }
        },
    }
</script>
    
<style>
    
</style>

改变输入框的值, 前面的文字不会随之改变
在这里插入图片描述

<template>
        {{str}}
        <input type="text" v-model="str">
        <button @click="sendFn()">发布</button>
</template>



// import { send } from 'vite';

    export default{
        data() {
            return {
                str:"文字"
            }
        },

        methods:{
            sendFn(){
                console.log(this.str);
                
            }
        }
    }

</script>