知识点: 
v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定
v-on修饰符可以指定键盘事件
v-model进行表单数据的双向绑定 <template> <p v-for="item in list">{{item.name}} {{item.price}}</p>
<button v-on:click="addItem">addItem</button> <!--v-on:相当于@-->
<button @click="addItem">addItem</button>
<input v-on:keydown.enter="onKeydown"/>    <!--指令的修改器-->
<componeta @my-event="onComponentEvent"></componeta> <!--<input v-model="myValue" type="text"/>{{myValue}} --> <!--v-model文本框的事件绑定,表单的事件绑定---->
<!--<input v-model.lazy="myValue" type="text"/>{{myValue}}--> <!--v-model.lazy延迟显示-->
<!-- <input v-model.number="myValue" type="text"/>{{typeof myValue}}--> <!--v-model.number将123(string)转化为123(number)-->
<input v-model.trim="myValue" type="text"/> {{myValue}} <!--v-model.trim截取字符串前后的空格--> <hr>
<input v-model="myBox" type="checkbox" value="apple"/> <!--v-model多选框的事件绑定-->
<input v-model="myBox" type="checkbox" value="banna"/>
<input v-model="myBox" type="checkbox" value="pineapple"/>
{{myBox}} <input v-model="myBox1" type="radio" value="apple"/> <!--v-model单选框的事件绑定-->
<input v-model="myBox1" type="radio" value="banna"/>
<input v-model="myBox1" type="radio" value="pineapple"/>
{{myBox1}} <!--v-model下拉框的事件绑定-->
<!--版本一-->
<!-- <select v-model="selection">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
{{selection}}--> <select v-model="selection"> <!--版本二-->
<option v-for="item in selectOption" v-bind:value="item.value">{{item.text}}</option> </select>
{{selection}} </div>
</template> <!--<script>
export default {
name: 'app'
}
</script>-->
<!--导入组件-->
<script>
/* eslint-disable */
import Vue from 'vue'
import Hello from './components/Hello'
import componeta from './components/a.vue' export default {
/* name: 'app',
components: {
Hello
},*/
components:{
componeta
},
data(){
return{
myValue:'',
myBox:[],
myBox1:[],

vue.js的一些事件绑定和表单数据双向绑定的更多相关文章

  1. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  2. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  3. Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  4. Vue.js源码——事件机制

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  5. Vue.js 学习笔记 第6章 表单与v-model

    本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...

  6. vue表单控件绑定(表单数据的自动收集)

    v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...

  7. JS中的事件(对象,冒泡,委托,绑定)

    - 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间,JS与HTML之间的交互是通过事件实现的 对于web应用来说,有下面这些代表性事件:点击事件,鼠标移动,按下键盘等等 - 事件,是用户和浏览器之 ...

  8. vue 实现父组件和子组件之间的数据双向绑定

    前言:vue 实现父组件给子组件传值,然后子组件可以修改回父组件的值.vue 的 prop 默认是单向数据绑定,但是偶尔需要双向绑定,这时就需要知道如何才能让子组件的数据修改时影响到父组件的数据.转载 ...

  9. vue 中contenteditable="true"添加可编辑属性后v-model双向绑定失效的解决办法

    在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现 ...

随机推荐

  1. 基于spring的quartz定时框架,实现简单的定时任务功能

    在项目中,经常会用到定时任务,这就需要使用quartz框架去进行操作. 今天就把我最近做的个人主页项目里面的定时刷新功能分享一下,很简单. 首先需要配置一个配置文件,因为我是基于spring框架的,所 ...

  2. px、dp、sp、mm、in、pt这些单位有什么区别?

    相信每个Android新手都会遇到这个问题,希望这篇帖子能让你不再纠结. px: 即像素,1px代表屏幕上一个物理的像素点: px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小 ...

  3. 解决启动Tomcat时遇到INFO: Destroying ProtocolHandler ["ajp-apr-8009"]

    问题描述: 启动Tomcat时,出现INFO: Destroying ProtocolHandler ["ajp-apr-8009"]等信息 这说明端口号被占用了... 解决方法: ...

  4. 【JVM】程序调优

    现实企业级Java开发中,有时候我们会碰到下面这些问题: OutOfMemoryError,内存不足 内存泄露 线程死锁 锁争用(Lock Contention) Java进程消耗CPU过高 .... ...

  5. error: https://packages.elastic.co/GPG-KEY-elasticsearch: import read failed(2).

    安装filebeat报错: curl: (35) SSL connect errorerror: https://packages.elastic.co/GPG-KEY-elasticsearch: ...

  6. 两台Linux系统之间传输文件

    用CRT分别连上两台需要传输文件的linux系统服务器,并检查防火墙是否关闭. 查看防火墙状态: /etc/init.d/iptables status 若防火墙启用,暂时关闭防火墙: /etc/in ...

  7. 详解MySQL第一篇—MySQL简要介绍及DDL语句

    背景:近几年,开源数据库逐渐流行起来.由于具有免费使用.配置简单.稳定性好.性能优良等优点,开源数据库在中低端应用上占据了很大的市场份额,而 MySQL 正是开源数据库中的杰出代表.MySQL 数据库 ...

  8. python 中字典的操作(增、删、改、查)

    字典是另一种可变容器模型,且可存储任意类型对象,下标从0开始,最后一个为-1. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({}) ...

  9. 记一次服务器迁移SVN客户端更换IP

    服务器迁移,SVN服务端IP由原10.58.8.231更换至10.58.1.230   TortoiseSVN更换ip地址操作如下: 打开svn项目的根目录,右键如图操作: 修改ip地址为10.58. ...

  10. Windows和Ubuntu双系统

    1  重装系统:Windows(Win7) 1.1 下载大白菜/老毛桃等工具,把U盘制作成启动盘 1.2 下载windows系统镜像文件放入U盘中 1.3  U盘插入待装系统的主机,开机进入BIOS( ...