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

时间 2019-11-12

标签 vue 学习笔记样式绑定事件处理繁體版

原文原文链接

一、样式绑定

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

（1）绑定 classvue

对象语法

咱们能够将一个对象传给 v-bind:class，它将根据传入对象的值动态切换 classnpm

<!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 列表数组

而且咱们能够在数组中使用三元运算符做为条件判断app

<!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）绑定 styleide

对象语法

咱们能够直接将一个样式对象传给 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>

数组语法

咱们能够将多个样式对象绑定到同一个元素上this

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

<!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>

二、事件处理

（1）事件处理.net

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学习笔记】