双向绑定事件

最新推荐文章于 2024-09-30 16:19:08 发布

小白程序猿一枚

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量339

点赞数

分类专栏： Vue学习文章标签： vue.js

本文链接：https://blog.csdn.net/fgets__/article/details/121462597

版权

Vue学习专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文通过一个实例展示了Vue.js中的双向数据绑定功能，包括文本输入框、文本域、单选框、复选框和下拉框的使用。当这些元素的内容改变时，data中的对应数据会实时更新，反之亦然。这种特性使得前端UI与数据模型的同步变得更加便捷。

摘要由CSDN通过智能技术生成

当表单、文本域的内容发生改变或者是单选框、复选框、下拉框被选中的时候data里边的数据也会发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
</head>
<body>

    <div id="app">
        <h3><font color="red"> 输入框：</font></h3>
       <input type="text" v-model="message"/>{{message}}

        <h3><font color="orange"> 文本域：</font> </h3>
       <textarea cols="30" rows="10" v-model="message1"></textarea>{{message1}}

        <h3><font color="green"> 单选框：</font> </h3>
        性别：<input type="radio" name="sex" value="♂" v-model="sex" checked/>男
        <input type="radio" name="sex" value="♀" v-model="sex"/>女
        <p>选中了：{{sex}}</p>

        <h3><font color="blue"> 多选框：</font> </h3>
        爱好：<input type="checkbox" name="hobby" value="running" v-model="hobbies"/>跑步
        <input type="checkbox" name="hobby" value="game" v-model="hobbies" />游戏
        <input type="checkbox" name="hobby" value="shopping" v-model="hobbies" />购物
        <p>选中了：{{hobbies}}</p>

        <h3><font color="#00ffff"> 下拉框：</font> </h3>
        <select v-model="selected">
            <option disabled value="">---请选择---</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <p>选中了：{{selected}}</p>

    </div>

    <!--引入vue的cdn-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "",
                message1: "",
                sex: "",
                hobbies:[
                ],
                selected: ""
            }
        });
    </script>

</body>
</html>