Vue.js 双向数据绑定 技术教程

一、引言

Vue.js是一套用于构建用户界面的渐进式JavaScript框架，以其轻巧、易用、高效和灵活性而深受开发者喜爱。双向数据绑定是Vue.js的核心功能之一，通过v-model指令实现。

二、v-model指令介绍

v-model指令是一种双向数据绑定指令，它允许视图和数据源之间进行双向同步更新。当数据源发生变化时，绑定的视图会自动更新；反之，当视图中的数据发生变化时，数据源也会同步更新。

三、v-model使用案例

1. 文本输入框

在文本输入框中使用v-model，可以实现输入框和应用数据之间的双向绑定。

        
<div id="app">
    双向数据绑定: <input type="text" v-model="data.text">
    <p>输入的内容: {{ data.text }}</p>
</div>
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js';
    createApp({
        setup() {
            const data = reactive({
                text: "baidu.com"
            });
            return { data };
        }
    }).mount("#app");
</script>

2. 单选框

在单选框中使用v-model，可以绑定单选按钮组的选中值。

        
<div id="app">
    您的爱好(单选): <input type="radio" v-model="data.radio" value="写作" name="radio">写作
    <input type="radio" v-model="data.radio" value="画画" name="radio">画画
    <p>选中的爱好: {{ data.radio }}</p>
</div>
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js';
    createApp({
        setup() {
            const data = reactive({
                radio: ""
            });
            return { data };
        }
    }).mount("#app");
</script>

3. 复选框

在复选框中使用v-model，可以绑定复选框组的选中值。

        
<div id="app">
    您喜欢吃的水果(多选): 
    <input type="checkbox" v-model="data.checkbox" value="苹果">苹果
    <input type="checkbox" v-model="data.checkbox" value="香蕉">香蕉
    <input type="checkbox" v-model="data.checkbox" value="橙子">橙子
    <p>选中的水果: {{ data.checkbox }}</p>
</div>
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js';
    createApp({
        setup() {
            const data = reactive({
                checkbox: []
            });
            return { data };
        }
    }).mount("#app");
</script>

4. 单个复选按钮

在单个复选按钮中使用v-model，可以绑定按钮的选中状态。

        
<div id="app">
    需要记住密码? {{ data.remember }}
    <input type="checkbox" v-model="data.remember">记住密码
</div>
<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js';
    createApp({
        setup() {
            const data = reactive({
                remember: false
            });
            return { data };
        }
    }).mount("#app");
</script>