Vue双向绑定

最新推荐文章于 2024-10-30 09:15:46 发布

qq_42042158

最新推荐文章于 2024-10-30 09:15:46 发布

阅读量77

点赞数

分类专栏：学习笔记文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/qq_42042158/article/details/120469590

版权

学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

v-model 实现数据的双向绑定

实时显示输入框的输入内容
使用v-model绑定data中的一项数据，根据输入框的输入动态更新
代码

<div id="app">
    请输入：<input type="text" v-model="yourInput">
    <p>你输入的内容：{{yourInput}}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            yourInput: "123"
        }
    })
</script>

运行结果
在这里插入图片描述

实时监测单选框的选择
代码

选择性别：<input type="radio" name="gender" value="男" v-model="sex">男
    <input type="radio" name="gender" value="女" v-model="sex">女
    <p>你选择的性别是：{{sex}}</p>

运行结果
在这里插入图片描述

实时监测下拉列表的选择
代码

下拉框
    <select v-model="yourSelect">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>下拉框的选择：{{yourSelect}}</p>

运行结果
在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo-05</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">
    请输入：<input type="text" v-model="yourInput">
    <p>你输入的内容：{{yourInput}}</p>

    选择性别：<input type="radio" name="gender" value="男" v-model="sex">男
    <input type="radio" name="gender" value="女" v-model="sex">女
    <p>你选择的性别是：{{sex}}</p>

    下拉框
    <select v-model="yourSelect">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>下拉框的选择：{{yourSelect}}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            yourInput: "123",
            sex:' ',
            yourSelect:' '
        }
    })
</script>

</body>
</html>