知识点: 
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. POJ3272 Cow Traffic

    题目链接:http://poj.org/problem?id=3272 题目意思:n个点m条边的有向图,从所有入度为0的点出发到达n,问所有可能路径中,经过的某条路的最大次数是多少.边全是由标号小的到 ...

  2. Mongodb系列文章

    http://blog.csdn.net/congcong68 学习MongoDB 六: MongoDB查询(游标操作.游标信息)(三) Mongodb官方C#驱动示例 MongoDB Driver ...

  3. php+nginx上传文件配置

  4. Purpose of ContextLoaderListener in Spring

    The ApplicationContext is where your Spring beans live. The purpose of the ContextLoaderListener is ...

  5. 现有mysql加入redis

    spring-dao.xml(注意这里必须加上ignore-unresolvedable): redis.properties: redis.hostname=192.168.1.3 redis.po ...

  6. generateScriptFile.py脚本使用过程中遇到的问题及解决

    generateScriptFile.py脚本 #!/usr/bin/env python # -*- coding: utf-8 -*- """ use case: p ...

  7. how to use greendao in android studio

    http://www.arjunsk.com/android/use-greendao-android-studio/ 1.新建一个java文件MainGenerator.java: import d ...

  8. bat命令运行java程序

    注意空格 本文主要介绍在window下bat批处理文件调用java的方法. @echo off echo 正在加密,请稍后....echo path:%~dp0 set base=%~dp0 set ...

  9. centos7部署PaaS平台环境(mesos+marathon)

    假如有5台主机可以使用,ip地址如下 规划(2master+3slave) master: 192.168.248.205 ---master1 192.168.248.206 ---master2 ...

  10. PAT 1130 Infix Expression[难][dfs]

    1130 Infix Expression (25 分) Given a syntax tree (binary), you are supposed to output the correspond ...