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

最新推荐文章于 2025-06-23 23:32:28 发布

键盘哥

最新推荐文章于 2025-06-23 23:32:28 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/Gaowahaha/article/details/81057399

vue学习笔记专栏收录该内容

11 篇文章

订阅专栏

本文介绍Vue.js中处理键盘事件的方法及样式绑定的应用，包括keydown、keyup事件的使用和动态样式的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，键盘事件

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'}
                },
            });