Vue学习笔记(五) 样式绑定和事件处理

1、样式绑定

class 和 style 属性都可以控制元素的显示样式，我们可以使用 v-bind 指令对它们进行绑定

（1）绑定 class

  • 对象语法

我们可以将一个对象传给 v-bind:class，它将根据传入对象的值动态切换 class

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .warn {
            background: yellow;
        }
        .error {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="{ warn: isWarn, error: isError }">Error</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                isWarn: true,
                isError: true
            }
        })
    </script>
</body>

</html>
  • 数组语法

我们也可以将一个数组传给 v-bind:class，以便应用一个 class 列表

并且我们可以在数组中使用三元运算符作为条件判断

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .warn {
            background: yellow;
        }
        .error {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="[warnClass, isError ? errorClass : '']">Error</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                warnClass: 'warn',
                errorClass: 'error',
                isError: true
            }
        })
    </script>
</body>

</html>

（2）绑定 style

  • 对象语法

我们可以直接将一个样式对象传给 v-bind:style，它将根据样式对象更新 style

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <div v-bind:style="styleObject">你好，世界</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                styleObject: {
                    color: 'green',
                    fontSize: '30px'
                }
            }
        })
    </script>
</body>

</html>
  • 数组语法

我们可以将多个样式对象绑定到同一个元素上

但是需要注意的是，对于相同的属性，后一个对象的值会覆盖前一个对象的值

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <div v-bind:style="[baseStyleObject, overrideStyleObject]">你好，世界</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                baseStyleObject: {
                    color: 'green',
                    fontSize: '30px'
                },
                overrideStyleObject: {
                    color: 'red'
                }
            }
        })
    </script>
</body>

</html>

2、事件处理

（1）事件处理

v-on 指令可以监听 DOM 事件，并对事件作出反应，我们可以给 v-on 传入一个 JavaScript 表达式

  • 执行 JavaScript 代码
<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>{{ counter }}</p>
        <!-- 当发生点击事件时，执行 JavaScript 代码 -->
        <button v-on:click="counter += 1">增加 1</button>
    </div>

	<script>
        new Vue({
            el: '#app',
            data: {
                counter: 0
            }
        })
    </script>
</body>

</html>
  • 绑定 JavaScript 方法
<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <!-- 当发生点击事件时，执行 JavaScript 方法 -->
        <button v-on:click="greet">greet</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                name: 'Vue'
            },
            methods: {
                greet: function () {
                    alert('Hello ' + this.name)
                }
            }
        })
    </script>
</body>

</html>
  • 调用 JavaScript 方法
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 当发生点击事件时，调用 JavaScript 方法，并给方法传入参数 -->
        <button v-on:click="greet('Alice')">Say Hello To Alice</button>
        </br></br>
        <button v-on:click="greet('Bob')">Say Hello To Bob</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            methods: {
                greet: function (name) {
                    alert('Hello ' + name)
                }
            }
        })
    </script>
</body>

</html>

（2）事件修饰符

事件修饰符用于处理 DOM 事件细节，通过由点表示的指令后缀调用修饰符，常见的事件修饰符包括：

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!-- 例如，提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

（3）按键修饰符

按键修饰符用于监听键盘事件，同样是通过由点表示的指令后缀调用修饰符，常见的按键码的别名包括：

  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
<!-- 例如，监听按下 Enter -->
<input v-on:keyup.enter="onSubmit">

（4）系统修饰符

可以使用系统修饰符实现仅在按下相应按键时才触发鼠标或键盘事件的监听器，常见的系统修饰符包括：

  • .ctrl
  • .alt
  • .shift
  • .meta
<!-- 例如，监听按下 Alt 之后按下 C -->
<input v-on:keyup.alt.67="clear">

【 阅读更多 Vue 系列文章，请看 Vue学习笔记 】

posted @ 2019-07-18 09:54  半虹  阅读(185)  评论(0)  编辑  收藏  举报