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. gitlab-CICD共享runner基本配置

    gitlab-CICD共享runner基本配置 使用docker部署runner 多个项目使用共享runner 部署机器与runner不在同一台服务器上(使用ssh部署) 部署runner 部署镜像 ...

  2. uni小程序保存base64图片

    使用uni.getFileSystemManager().writeFile去下载base64图片<view class="share-btn" @click="s ...

  3. Dilworth

    Dilworth 定理 偏序集能划分成的最少的全序集个数等于最大反链的大小. 名词解释 偏序 在集合 \(S\) 中定义的二元关系 \(\le\),如果它满足以下三个性质: 自反性:\(\forall ...

  4. ubuntu 安装SVN

    s1: [sudo apt-get install subversion] s2:本地新建一个文件夹如SVN,在该文件夹下打开终端输入命令[svn co https://xxx/svn/xxx --u ...

  5. redis的安装详细教程

    redis官方下载地址是:https://redis.io/download, redis 64位下载地址是:https://github.com/ServiceStack/redis-windows ...

  6. Tomcat集群配置--负载均衡

    Tomcat集群配置学习篇-----分布式应用 现目前基于javaWeb开发的应用系统已经比比皆是,尤其是电子商务网站,要想网站发展壮大,那么必然就得能够承受住庞大的网站访问量:大家知道如果服务器访问 ...

  7. python APScheduler用法

    参考: https://blog.csdn.net/weixin_44799217/article/details/127353134 https://blog.csdn.net/weixin_428 ...

  8. IaaS--区域和可用区（何恺铎《深入浅出云计算》笔记整理）

    [关键概念] IaaS(Infrastructure as a Service):即"基础设施即服务",一般指云计算所提供的计算.存储.网络等基本底层能力.是基于软件技术对物理硬件 ...

  9. 查看树莓派CPU当前工作频率

    参考: https://raspberrypi.stackexchange.com/questions/1219/how-do-i-determine-the-current-mhz /proc/cp ...

  10. Chart控件-常用设置

    visual studio中原生控件chart控件使用时的一些常用设置 鼠标缩放功能 缩放后恢复曲线