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">

vue的双向绑定规则的更多相关文章

  1. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  2. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  3. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  4. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  5. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  6. vue数据双向绑定

    Vue的双向绑定是通过数据劫持结合发布-订阅者模式实现的,即通过Object.defineProperty监听各个属性的setter,然后通知订阅者属性发生变化,触发相应的回调. 整个过程分为以下几步 ...

  7. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  8. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  9. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  10. vue的双向绑定原理解析（vue项目重构二）

    现在的前端框架 如果没有个数据的双向/单向绑定,都不好意思说是一个新的框架,至于为什么需要这个功能,从jq或者原生js开始做项目的前端工作者,应该是深有体会. 以下也是个人对vue的双向绑定原理的一些 ...

随机推荐

  1. A调用B方法，@Transactional事务问题

    总结:方法A调用方法B:1.如果只有A加@Transactional注解:则AB在同一事务中,任意异常都回滚:2.如果只有B加@Transactional注解:AB方法为同一类,事务失效任意异常都不回 ...

  2. 配置python库源为清华源

    目录 Windows Ubuntu pip较低版本 pip较高版本 Windows %HOMEPATH%/pip/pip.ini [global] index-url = https://pypi.t ...

  3. elementUI合并单元格

    <el-table :data="tableDataFormat" border :header-cell-style="{background:'#FAFAFA' ...

  4. c--> #define 定义宏

    #define 定义宏 宏(Macro)是预处理命令的一种,它允许用一个标识符来表示一个字符串 1.有关定义宏的代码末尾不需要添加":"(分号) 2.定义宏define在计算的式子 ...

  5. WOW事件大全（翻译对照）

    魔兽世界(WOW)插件开发事件大全 ACHIEVEMENT_EARNED 取得的成就 ACHIEVEMENT_SEARCH_UPDATED 已更新成就搜索 ACTIONBAR_HIDEGRID 动作条 ...

  6. 推荐2个可用于毕设的微信小程序

    智能垃圾回收小程序 下载: http://market.zhenzikj.com/detail/103.html 2. 通用答题小程序 下载http://market.zhenzikj.com/det ...

  7. Cendos中启动docker失败的问题

    注:在 Windows中使用Linux虚拟机中使用Cendos 刚开始安装Docker时没有任何错误, 但是在后续的docker启动过程中, 出现以下问题: 按提示使用 systemctl statu ...

  8. Hadoop完全分布式开发配置流程

    完全分布式开发 整体流程 1.准备3台纯净虚拟机 2.修改每台ip,主机名,主机映射,关闭防火墙 3.安装jdk和hadoop,配置环境变量 4.集群分发脚本编写 5.集群配置 6.ssh免密登录 7 ...

  9. selenium------关于switch_to的用法场景

    基于python3的语法,driver.switch_to_alert()的表达会出现中划线,因此需要把后面的下划线改为点.一.目前接触到的switch_to的用法包括以下几种:1. 切换到制定的wi ...

  10. Go--生成excel表格，读取excel表格数据

    先下载第三方依赖包: go get -u github.com/xuri/excelize/v2 代码: package main import ( "fmt" "git ...