vue的双向绑定规则

vue提供了v-model双向绑定指令，用来辅助在不操作DOM的前提下，快速读取表单的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>用户名是：{{username}}</p>
    <input type="text" v-model="username">
    <hr>
    <p>选中的省份是：{{provonce}}</p>
    <select v-model="provonce">
        <option value="">请选择</option>
        <option value="1">北京</option>
        <option value="2">河北</option>
        <option value="3">黑龙江</option>
    </select>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            username: 'zs',
            provonce: ''
        }
    })
</script>
</body>
</html>

 v-model指令修饰符

number 自动将用户的输入值转为数值类型 <input v-model.lazy="age">

trim 自动过滤用户输入的空白字符 <input v-model.lazy="msg">

lazy 在"change"时而非"input时更新" <input v-model.lazy="msg">

posted @ 2021-12-07 16:42  fat_girl_spring  阅读(54)  评论(0)  编辑  收藏  举报