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學習筆記】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。