双向数据绑定

最新推荐文章于 2024-03-20 17:14:04 发布

原创最新推荐文章于 2024-03-20 17:14:04 发布 · 291 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文深入探讨了Vue框架中双向数据绑定的实现原理与应用，包括v-model指令在表单元素中的作用，如何通过它实时更新数据并响应数据变化，以及如何使用ref属性直接操作DOM元素。

双向数据绑定

双向数据绑定基于MVVM框架，vue属于MVVM框架

MVVM：M等于model，V等于view，即model改变影响view，view改变影响model

1.双向数据绑定

<!-- 双向数据绑定 -->
#必须在使用在表单里面
#使用v-model绑定数据，实现动态数据变化
<h3>{{msg}}</h3>
<input type="text" v-model="msg">

#js代码
export default {
    name: 'app',
    data() {
        return {
            msg: 'vue demo',
        }
    }
}

获取动态数据

<!-- 获取动态数据 -->
<button v-on:click="getMsg()">获取表单数据</button>

#js代码
methods: {
    getMsg() {
        alert(this.msg)
    }
}

设置表单数据

<!-- 设置动态数据 -->
<button v-on:click="setMsg()">设置表单数据</button>

#js代码
methods: {
    setMsg(){
        this.msg = '设置后的数据';
    },
}

2.使用ref绑定数据（使用ref进行dom操作）

#html代码
<input type="text" ref="textInfo"/>
<div ref="box">这里是一个box</div>
<!-- 获取动态数据 -->
<button v-on:click="getInfo()">获取表单数据</button>

#js代码
methods: {
    getInfo() {
        alert(this.$refs.textInfo.value);
        this.$refs.box.style.background = 'red';
    },
}