Vue学习(六): v-model实现表单元素的数据双向绑定

v-model指令,可以实现表单元素和Model中数据的双向数据绑定,但v-model只能运用到表单元素中(表单控件在实际的业务场景中是比较常见的,单选,多选,下拉选择,输入框等,用这些控件可以完成数据的录入、校验以及提交等。vue给我们提供了v-model指令用于在表单类元素上双向绑定数据。 )

代码示例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input{
            width: 100%;
            padding: 15px 10px;
        }
    </style>
</head>
<body>
    <div id="app">
      <h4>{{msg}}</h4>
      <!--v-bind:(:)只能实现数据的单向绑定,从M 绑定到V-->
      <input type="text" name="name" :value="msg">
      <!--v-model指令,可以实现表单元素和Model中数据的双向数据绑定-->
      <!--v-model只能运用到表单元素中-->
      <input type="text" name="name" v-model="msg">
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                msg: '这个Messge里面内容'
            },
            methods:{
             
            }
        })
    </script>
</body>
</html>