美文网首页
Vue 键盘事件及键值修饰符(alt:enter)、双向数据绑定

Vue 键盘事件及键值修饰符(alt:enter)、双向数据绑定

作者: 祝名 | 来源:发表于2018-12-24 18:19 被阅读0次

一.键盘事件及键值修饰符(alt:enter)

1.键盘事件keyup,只要按键就会触发相应函数。

2.keyup后面接的修饰符enter表示,只有按下enter键才会触发对应函数。

3.修饰符可添加多个,接enter和alt修饰符表示,同时按下alt和enter键才会触发。


二.双向数据绑定

1. 只能应用于input select textarea

2. 方法一:input的ref属性可用于标记。键盘事件触发logName方法,通过“this.$refs.ref属性值.value”获取到input中实时输入的数据。将这个数据赋值给vue对象中的(“this.name”)name属性,从而实时修改span标签中的name。实现双向数据绑定


2. 方法二:v-model,这里v-model获取的name就是vue对象中的name属性,所以vue中的name设置的默认值hello,可以直接附在输入框内。改动input中的输入值,会相应的修改vue中的name属性,从而修改span标签中的那么。实现双向数据绑定


相关文章

  • Vue 键盘事件及键值修饰符(alt:enter)、双向数据绑定

    一.键盘事件及键值修饰符(alt:enter) 1.键盘事件keyup,只要按键就会触发相应函数。 2.keyup...

  • 实例学习vue.js目录

    目录 入门篇 初识vue vue基础指令 vue实例:标语大作战 事件修饰符 双向数据绑定 使用v-for遍历数据...

  • 深入Vue响应式原理

    1.Vue的双向数据绑定 参考 vue的双向绑定原理及实现Vue双向绑定的实现原理Object.definepro...

  • Vue 实例 一

    Vue实例基础一 数据的双向绑定 v-model 绑定表单的相应事件,和数据实现动态的双向绑定,需要在Vue实例中...

  • 53-Vue-watch属性

    这里主要实现监听数据变化进行某些操作,两种方法对比 一.监听键盘事件 双向数据绑定 添加数据 绑定键盘监听事件 添...

  • Vue 中的双向数据绑定

    双向绑定 单向数据流 双向绑定 or 单向数据流 Vue 是单向数据流,不是双向绑定 Vue 的双向绑定是语法糖 ...

  • vue中事件绑定的原理

    vue中事件的绑定机制分为两种:单向数据绑定和双向数据绑定1.单向数据绑定用v-bind,可以缩写为“:”2.双向...

  • Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取

    1,vue的双向数据绑定和Vue事件介绍 2,Vue中ref获取dom节点

  • 6. Vue 按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。 全部的按...

  • 前端小白学习Vue.js心得分享

    一,键盘事件及键值修饰符 在上一篇文章我们了解了事件修饰符,这篇文章了我们来看看键值修饰符,同样的我们列表了一些修...

网友评论

      本文标题:Vue 键盘事件及键值修饰符(alt:enter)、双向数据绑定

      本文链接:https://www.haomeiwen.com/subject/lgnakqtx.html