vue《四》（ 键盘事件，样式绑定）

最新推荐文章于 2024-05-15 07:38:40 发布
最新推荐文章于 2024-05-15 07:38:40 发布
阅读量933 收藏
点赞数
分类专栏： vue学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gaowahaha/article/details/81057399
版权

一，键盘事件

1.keydown()键盘键入，触发事件

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#test',
                methods:{
                    show:function(){
                        alert("键盘键入");
                        //event.cancelBubble = true;
                    },
                }
            });
        }
    </script>
</head>
<body>
<div id="test">
    <input type="text" placeholder="请输入" @keydown="show()">
</div>
</body>
</html>

2.点击回车键触发事件

<div id="test">
        <input type="text" placeholder="请输入" @keyup.13="show($event)"> 
    </div>

3.其它事件

@keyup.13 回车
@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键
......

二，样式绑定

样式：


具体代码：

<div id="test2">
    <img src="{{url}}">
    <img v-bind:src="url">
</div>
var vm2 = new Vue({
                el:'#test2',
                data:{
                    url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
                },
            });

src="{{url}}"这种方式不能显示 图片

在Vue中，HTML属性有特有的写法  v-bind:src="url"可以简写成:src="url"

宽度和高端等HTML属性可以直接使用，建议按照vue中写法写代码。

<img :src="url" width="w" height="h" :title="t">
var vm2 = new Vue({
                el:'#test2',
                data:{
                    url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
                    w:'110px',
                    h:'110px',
                    t:'图片标题'
                },
            });

class和style

数组用法：v-bind:class="[red,b]" 
绑定的样式数据：red,b

<div id="test3">
    <span v-bind:class="[red,b]">这里是样式</span>
</div>
   <script type="text/javascript">
        window.onload = function(){
           
            var vm3 = new Vue({
                el:'#test3',
                data:{
                    red:'red', //值red是定义的样式名
                    b:'b',
                },
            });
        }
    </script>
    <style type="text/css">
        .red{color: red}
        .b{background: blue}
    </style>

传入一个对象，以动态的切换class。

<div id="test4">
    <span v-bind:class="{red:true}">文字</span> <!-- 样式生效 -->
    <span v-bind:class="{red:false}">文字</span> <!-- 样式不生效 -->
    <span v-bind:class="{red}">文字</span><!-- 默认是true -->
</div>

style

样式：


代码：

<div id="test5">
    <p :style="{color:green}">第五个测试</p>
</div>
var vm5 = new Vue({
                el:'#test5',
                data:{
                    green:'green',
                },
            });

样式：


代码：

<div id="test6">
    <strong :style="[a,b]">第六个测试</strong>
</div>
var vm6 = new Vue({
                el:'#test6',
                data:{
                    a:{color:'red'},
                    b:{background:'green'}
                },
            });


键盘哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 框架之键盘事件、健值修饰符、双向数据绑定
12-11
一、键盘事件，当按键盘时，在控制台输出提示 html 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi</title> <!--引入...
vue数字虚拟键盘组件
08-10
2. **事件绑定**：通过Vue的事件绑定机制，开发者可以监听键盘的按键事件，比如点击数字键时触发相应的处理函数，或者在用户完成输入后触发确认事件。 3. **数据双向绑定**：Vue.js的双向数据绑定使得虚拟键盘输入...
vue按键绑定事件
weixin_42584507的博客
01-09 238
在 Vue 中，可以使用 v-on:keyup 指令来绑定按键事件。 例如： <template> <div> <input v-on:keyup="handleKeyup" type="text"> </div> </template> <script> export default { methods...
vue 触摸屏虚拟键盘简单示例分享
QQlove_的博客
01-11 736
vue 触摸屏虚拟键盘
Vue-键盘事件
最新发布
m0_73839298的博客
05-15 383
什么键盘事件？什么键盘事件？在Vue.js中键盘事件是用户与计算机交互时由键盘操作产生的事件。在 Web 开发中，键盘事件可以用来监听和响应用户的键盘输入，这在实现搜索功能、快捷键、表单处理以及提供无障碍体验方面尤为重要。键盘事件。
vue3中自定义一个简单键盘
dekuyu blog
10-20 689
自定义简单数字键盘，可以在输入框获取焦点时弹出键盘
vue中设置样式
weixin_45616246的博客
04-05 315
请陛下批阅 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中设置样式</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.j...
vue封装数字键盘
weixin_45843676的博客
07-11 816
vue封装数字键盘
Vue方法与事件处理器详解
09-01
4. **事件修饰符的缩写语法**：Vue也支持更简洁的事件绑定语法，例如`@keyup.enter`，这与`v-on:keyup.enter`等价。在实际应用中，这种简写形式使代码更易读。 5. **数据绑定与类的动态切换**：在示例中，`v-bind:...
使用Vue自定义数字键盘组件(体验度极好)
11-29
在本文中，我们将深入探讨如何使用Vue.js框架创建一个自定义的数字键盘组件，以提供良好的用户体验。这个组件主要用于输入金额，允许用户通过点击屏幕上的虚拟数字键进行操作。我们将讨论以下几个关键知识点： 1. *...
使用vue实现简单键盘的示例(支持移动端和pc端)
08-28
我们使用 `v-on` 指令来绑定键盘事件，如 `@click.stop` 和 `@touchend.stop`。这些事件可以响应用户的点击和触摸操作。 Knowledge Point 4: 使用计算属性实现键盘状态切换 在该示例中，我们使用 Vue 的计算属性...
自定义数字键盘（基于Vue封装）
L_Sarah的博客
07-27 1625
最近在做一个项目有个需求，点击输入框，自动调起数字键盘。 最开始一直尝试设置input的type属性，但都遇到了各种各样的问题： 1.type=number，PC和安卓都不能输入非数字字符（注意：安卓仍然可以输入+和-），最大的问题是ios可以切换到非数字键盘，但输入的非数字字符都会自动清空，因此获取不到输入的值，也就没有办法判断输入的值是数字还是非数字 2.type=tel，ios不能切换到非数字键盘，看似完美解决问题，但ios数字键盘没有小数点(.)，当需要输入金额时就不适用了 后来产品提出，为了提高用
vue 自定义键盘实现，根据input 定位
qq_40247562的博客
03-23 1445
vue 自定义键盘组件
vue 数字软键盘 插件 封装 可拖动
奇点的博客
11-12 913
在一些没有鼠标和键盘的情况下，需要软键盘，可拖动的数字键盘
vue中的事件绑定
ead_gbe的博客
06-27 5447
按钮1</button><button class="btn" v-on:click = "showInfo2(66)">按钮2
vue绑定事件
bingmoujs的博客
03-17 5071
3、@click.self：只有在点击所在的当前这一级标签的时候才会触发事件，点击它里面的子元素标签不会触发事件。【只有在e.target = e.currentTarget的时候才执行，也就是触发事件的元素和绑定事件的元素相等的时候才会执行。1、@click.prevent：阻止事件的默认行为（在后面依然看可以写click要触发的函数：@click.prevent="handle"）4、@click.once：绑定的事件只会执行一次，执行后这个事件会解绑，不会再被执行。
vue(13) : 按键及组合键绑定
Lxinccode的博客
09-06 1551
【代码】vue(13) : 按键及组合键绑定。
vue绑定键盘事件无效问题，vue绑定键盘delete事件示例，组合键绑定
weixin_41308436的博客
11-18 4133
var _this = this; document.onkeydown = function (e) { let key = window.event.keyCode; if (key == 13) { _this.send();//调用method中的send 方法 } }
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）
运维玄德公
05-31 6294
1. 点击事件参数（click） 1.1 基本使用 1.2 绑定一个方法 1.3 冒泡事件 说明 示例 2. 点击事件修饰符 2.1 .stop （阻止冒泡） 使用说明 使用示例 2.2 capture （捕获冒泡） 使用说明 使用示例 2.3 .self （只监听触发该元素的事件） 使用说明 使用示例 2.4 once （事件只触发一次） 使用说明 使用示例 2.5 鼠标的修饰符......
vue3给div键盘事件
09-01
在这个示例中，我为div元素设置了id为"myDiv"，tabindex属性为0，以便使其能够获取焦点，并通过@keydown指令将键盘事件绑定到名为keyEvent的方法上。 2. 在Vue组件的script部分，定义keyEvent方法来处理键盘事件，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值