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 阅读(58) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称： fat_girl_spring
园龄： 6年9个月
粉丝： 9
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

fat_girl_spring

vue的双向绑定规则

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论