Vue-表单双向绑定与表单常用修饰符

VUE 双向数据绑定

v-model 一般应用于表单元素

单向数据绑定从数据模型【发生改变】到视图【更新】视图更新数据模型不会发生改变
双向数据绑定数据模型发生改变视图随之改变，反之亦然

输入框的双向数据绑定

<body>
    <div id="app">
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
    <script>
    let vm = new Vue({
        el:"#app",
        data:{
            msg:1314
        }
    })
    </script>
</body>

运行代码并更改input中的数据，会发现p标签的数据也相应改变

复选框

复选框如果是一个，为逻辑值，如果是多个则绑定到同一个数组

<body>
    <div id="app">
        <p>单个复选框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>

        <p>多个复选框：</p>
        <input type="checkbox" id="runoob" value="Baidu" v-model="checkedNames">
        <label for="runoob">Baidu</label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">taobao</label>
        <br>
        <span>选择的值为: {{ checkedNames }}</span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                checked: false,
                checkedNames: []
            }
        })
    </script>
</body>

运行代码，点击选中数据随之改变

单选框

<body>
   <div id="app">
        <input type="radio" name="url" v-model="url" value="baidu.com">
        <input type="radio" name="url" v-model="url" value="yixuan.today">
        <p>{{url}}</p>
   </div>
   <script> 
    let app =  new Vue({
       el:"#app",
       data:{
           url:''
       }
   })
   </script>
</body>

点击单选框发现p标签的数据随之改变
...

修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值

<input v-model.number="age" type="number">

.trim

过滤首位空格

<input v-model.trim="msg">