vue.js的一些事件绑定和表单数据双向绑定
知识点:
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的一些事件绑定和表单数据双向绑定的更多相关文章
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
- Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定
1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...
- Vue.js源码——事件机制
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- Vue.js 学习笔记 第6章 表单与v-model
本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...
- vue表单控件绑定(表单数据的自动收集)
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- JS中的事件(对象,冒泡,委托,绑定)
- 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间,JS与HTML之间的交互是通过事件实现的 对于web应用来说,有下面这些代表性事件:点击事件,鼠标移动,按下键盘等等 - 事件,是用户和浏览器之 ...
- vue 实现父组件和子组件之间的数据双向绑定
前言:vue 实现父组件给子组件传值,然后子组件可以修改回父组件的值.vue 的 prop 默认是单向数据绑定,但是偶尔需要双向绑定,这时就需要知道如何才能让子组件的数据修改时影响到父组件的数据.转载 ...
- vue 中contenteditable="true"添加可编辑属性后v-model双向绑定失效的解决办法
在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现 ...
随机推荐
- C# ArcEngine 实现点击要素高亮并弹出其属性
本文是模仿ArcMap里面的Identify(识别)功能,通过点击要素,使其高亮显示并弹出其属性表!本文只做了点击查询! 本文所用的环境为VS2010,AecEngine基于C#语言,界面是用Dev做 ...
- multi-paradigm
w范式 https://developer.mozilla.org/en-US/docs/Web/JavaScript https://developer.mozilla.org/zh-CN/docs ...
- Logstash之时区问题的建议和修改---filter---and duplicate resolution.
2. logstash es duplicate https://logstash.jira.com/browse/LOGSTASH-1875 https://logstash.jira.com/br ...
- MySQL exists 和 not exists 的用法
有一个查询如下: 1 SELECT c.CustomerId, c.CompanyName 2 FROM Customers c 3 WHERE EXISTS( 4 SELECT ...
- Zipline Data Bundles
Data Bundles A data bundle is a collection of pricing data, adjustment data, and an asset database. ...
- WeQuant交易策略—EMV
EMV指标策略 简介 EMV(Ease of Movement Value, 简易波动指标),它是由RichardW.ArmJr.根据等量图和压缩图的原理设计而成, 目的是将价格与成交量的变化结合成一 ...
- CentOS6.5之Zabbix3.2.2 Server安装、汉化及Agent安装
1.安装MySQL 1.1.安装MySQL rpm -ivh http://dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm yum ...
- PushState+Ajax实现简单的单页面应用SPA
http://www.helloweba.com/view-blog-386.html 单页面应用(Single Page Application)简称SPA,使用SPA构建的应用优点有用户体验好.速 ...
- Vi文本编辑
vi 有3种工作模式,分别是命令行模式.插入模式.底行模式 . 命令行模式:最初进入的一般模式,该模式下可以移动光标进行浏览,整行删除,但无法编辑文字.插入模式:只有在该模式下,用户才能进行文字的编辑 ...
- ED3 flash 、OBP flash
海力士.东芝等ED3 NAND Flash ED3的TLC编程规则相对于OBP来讲会简单许多,因为ED3的编程规则非常有规律,很容易掌握,ED3的每个WL页数量是固定的. ED3在对行地址的定义上与O ...