v-model 之双向数据绑定

Vue 中使用v-model 指令来实现表单元素和数据的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
    <div id="app">
        <!-- value属性只能将数据变化同步到视图 -->
        <input type="text" :value="name">
        <!-- v-model系统指令能够实现双向数据绑定，即不仅能将数据变化同步到视图，还能将视图上的变化同步到数据 -->
        <input type="text" v-model="phone">
        <!-- 表单提交默认方法是get可省略不写，action="#"代表提交到当前页面 -->
        <form action="#">
            <input type="text" id="username" v-model="user.uname">
            <input type="password" id="pwd" v-model="user.upwd">
            <input type="button" v-on:click="submit" value="注册">
        </form>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            name:"liy",
            phone:"123456",
            user:{
                uname:"",
                upwd:""
            }

        },
        methods:{
            submit:function(){
                alert("username=" + this.user.uname + "," + "password=" + this.user.upwd);
                console.log("username=" + this.user.uname + "," + "password=" + this.user.upwd);
            }
        }
    });
</script>
</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

v-model 之 双向数据绑定

友情链接更多精彩内容

v-model 之双向数据绑定