插值两种方式：{{}}，v-model

v-model

可以用 v-model 指令在只能在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
监听用户的输入事件以更新数据
<body>

    <div id="form">

        <form>

            <input v-model="message" placeholder="edit me">

            <p>

                Message is :{{ message }}

            </p>

        </form>

    </div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

        var form = new Vue({

            el:'#form',

            data:{

                message:'hello world',

            }

        })

    </script>

</body>

修饰符

.lazy（懒惰，加回车键显示结果）

<body>

    <div id="form">

        <!-- 阻止表单默认的submit行为 -->

        <form @submit.prevent>

            <!-- .lazy懒惰  加回车键 -->

            <input v-model.lazy="message" placeholder="edit me">

            <p>

                Message is :{{ message }}

            </p>

        </form>

    </div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

        var form = new Vue({

            el:'#form',

            data:{

                message:'hello world',

            }

        })

    </script>

</body>

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

只允许输入数值

<body>

    <div id="form">

        <!-- 阻止表单默认的submit行为 -->

        <form @submit.prevent>

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

        </form>

    </div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

        var form = new Vue({

            el:'#form',

            data:{

                age:10,

            }

        })

    </script>

</body>

鼠标按钮修饰符

vue_ form表单 v-model的更多相关文章

  1. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

  2. Laravel框架中Form表单Get请求搜索（在此感谢[https://simon8.com]）

    首先看一下HTML部分的Form表单 <form role="search" method="get" id="searchform" ...

  3. Django组件之Form表单

    一.Django中的Form表单介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入 ...

  4. python自动化开发-[第二十天]-form表单,CBV和FBV,序列化

    1.CBV和FBV的用法 2.序列化用法 3.form表单 一.CBV和FBV 1.cbv是 class based view(基于类),fbv是function based view(基于函数) 2 ...

  5. django基础之FBV与CBV，ajax序列化补充，Form表单

    目录: FBV与CBV ajax序列化补充 Form表单(一) 一.FBV与CBV 1.什么是FBV.CBV? django书写view时,支持两种格式写法,FBV(function bases vi ...

  6. Django学习系列之Form表单结合ajax

      Forms结合ajax Forms的验证流程: 定义用户输入规则的类,字段的值必须等于html中name属性的值(pwd= forms.CharField(required=True)=<i ...

  7. Django form表单 组件

    目录 Django form表单 组件 Form 组件介绍 普通方式手写注册功能 使用form组件实现注册功能 Form 常用字段与插件 常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...

  8. web框架-（六）Django补充---form表单验证

    一.form表单验证 1. 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的 ...

  9. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

随机推荐

  1. Nodejs Q promise设计思路

    Nodejs Q promise库 前言 Q库为nodejs提供了一个基于promise的编程方式,从此避免了一层又一层的callback调用.不过Q的灵活性也给我造成了很大困扰,我可以用promis ...

  2. Python简易项目 加减计算器的实现

    Python Calculator 1.0 支持功能:add.minus 输入表达式不含括号,允许不加'=' 非常简单的一个小计算器,还缺少很多功能,目的是为了练练手. 日后会对其进行更新. 源码 G ...

  3. tp5---auth权限搭建2

    1.auth权限 composer auth库 下载完成之后 根据auth.php中所提及怎样创建表,就怎样建表 2.安利一个简单的建表操作 根据composer下载里的文件注释的代码,将其直接放到s ...

  4. Tomcat 的context.xml说明、Context标签讲解

    Tomcat的context.xml说明.Context标签讲解 1. 在tomcat 5.5之前 --------------------------- Context体现在/conf/server ...

  5. JSP 标准标签库（JSTL）

    JSP 标准标签库(JSTL) JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签, ...

  6. vim 删除多列

    比如想删除一个文件的1-1000行的前3列: gg #到文件首ctrl+v #可视块模式999j,2l #注意是小写的J和L(方向键向下和向右也可以)d #删除

  7. OpenCL双边滤波实现美颜功能

    OpenCL是一个并行异构计算的框架,包括intel,AMD,英伟达等等许多厂家都有对它的支持,不过英伟达只到1.2版本,主要发展自己的CUDA去了.虽然没有用过CUDA,但个人感觉CUDA比Open ...

  8. 利用ftrace跟踪内核static tracepoint

    摘要:和很多linux内核子系统一样,static tracepoint有很多层次,其中某个层次都展示给不同层次的开发者来满足他们的不同需求.关于linux tracepoint的详细信息,我们可以在 ...

  9. 【转】线程池体系介绍及从阿里Java开发手册学习线程池的正确创建方法

    jdk1.7中java.util.concurrent.Executor线程池体系介绍 java.util.concurrent.Executor : 负责线程的使用与调度的根接口  |–Execut ...

  10. C++复习8.异常处理和RTTI

    C++异常处理和RTTI技术 20130930 1.异常处理的基本知识 C语言中是没有内置运行时错误处理机制,对于错误发生的时候使用的几种处理机制: 函数返回彼此协商后统一定义的状态编码来表示操作成功 ...