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实现 ...
随机推荐
- 转:Java并发编程与技术内幕:线程池深入理解
版权声明:本文为博主林炳文Evankaka原创文章,转载请注明出处http://blog.csdn.net/evankaka 目录(?)[+] ); } catch (InterruptedExcep ...
- shell 从文件中读取批量文件名并做命令行操作
222文件内容: /home/zhangsuosheng/Desktop/9-30/9_30/1bak/1538291162.png /home/zhangsuosheng/Desktop/9-30/ ...
- Nginx+tomcat配置负载均衡集群
操作系统版本:Centos 6.4 Nginx版本:nginx-1.3.15.tar.gz wget http://nginx.org/download/nginx-1.5.9.tar.gz JDK版 ...
- 微信js-sdk使用
<?php $appid=""; $secret=""; class JSSDK { private $appId; private $appSecret ...
- 子集和问题(应用--换零钱)POJ2229:Sumsets
我一直在纠结换零钱这一类型的题目,今天好好絮叨一下,可以说他是背包的应用,也可以说他是单纯的dp.暂且称他为dp吧. 先上一道模板题目. sdut2777: 小P的故事——神奇的换零钱 题目描述 已知 ...
- 使用python操作文件实现购物车程序
使用python操作文件实现购物车程序 题目要求如下: 实现思路 始终维护一张字典,该字典里保存有用户账号密码,购物车记录等信息.在程序开始的时候读进来,程序结束的时候写回文件里去.在登录注册的部分, ...
- 这样才能使本地Mysql服务允许被外部主机连接(两步)
网上的N多方法都不全面,只有下面的第一步或第二步是不行的,必须同时执行下面两步操作: 修改mysql.user表 以root或debian-sys-maint身份登录mysql $ mysql -u ...
- Embedding SQLite in a c programm
Embedding SQLite in a c programm The following program demonstrates how to embed SQLite into ...
- SQL Server扩展属性的增、删、改、查
使用 sql 语句创建表时,可以使用系统存储过程 sp_addextendedproperty 给字段添加描述说明. sp_addextendedproperty 语法: sp_addextended ...
- [笔记] 基于nvidia/cuda的深度学习基础镜像构建流程
基于NVidia开源的nvidia/cuda image,构建适用于DeepLearning的基础image. 思路就是先把常用的东西都塞进去,再装某个框架就省事儿了. 为了体验重装系统的乐趣,所以采 ...