人生与戏

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

1.  v-model指令 : 双向数据绑定

效果图:

 

 代码:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="one">
    <!-- v-model : 双向数据绑定 -->
    <input v-model="message" placeholder="edit me">
    <p> message is: {{ message }}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#one',
        data: {
            message: ''
        }
    })
</script>
</body>
</html>

提交表单信息效果图:

 

 代码:

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="one">
    <!-- v-model : 双向数据绑定 -->
    <input v-model="message" placeholder="edit me"><br/>
    <input type="radio" value="apple" id="a" v-model="message2"><label for="a">apple</label><br/>
    <input type="radio" value="pear" id="p" v-model="message2"><label for="p">pear</label><br/>
    <button type="submit" @click="submit">提交</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#one',
        data: {
            message: '',
            message2:''
        },
        methods:{
            submit: function(){
                // 当数据发生变化时,vue实例对象 vm也发生联动变化
                console.log(this)
                console.log(this.message);
                var postObj = {
                    msg1: this.message,
                    msg2: this.message2,
                };
                console.log(postObj);
            }
        }
    })
</script>
</body>
</html>

 

posted on 2019-09-23 22:17  人生与戏  阅读(201)  评论(0编辑  收藏  举报