大香蕉偷拍性爱视频,天堂伊人,不卡在线视频,免费播放婬乱视频,五月天激情国产综合婷婷,欧美一级免费黄片,擦逼视频,亚洲无码视频免费

來源 |?https://xueyuanjun.com/post/21923

我們在《【Vue.js 入門到實戰(zhàn)教程】01-Vue.js 數(shù)據(jù)綁定的基本實現(xiàn)和代碼分析》中演示數(shù)據(jù)綁定的時候，是將 Vue 實例的模型屬性綁定到了表單輸入元素上，除此之外，還可以將模型數(shù)據(jù)綁定到視圖層 HTML 元素的任意屬性和類名（class）上，綁定表單元素值時使用的是 v-model 指令，而綁定屬性和類名時，需要使用 v-bind 指令。接下來，我們來給大家簡單演示下這兩個功能的使用。

屬性綁定

我們在?vue_learning/basic?目錄下新建一個 HTML 5 文件，將其命名為 bind.html，首先，我們來演示屬性綁定功能的使用。

我們在 HTML 視圖中新增一個 a 標(biāo)簽元素，通過 v-bind:title 指令將該元素的 title 屬性值與模型屬性的 title 值綁定起來，然后在 Vue 對象實例初始化的時候設(shè)置模型數(shù)據(jù) title 的值：

<html lang="en"><head>    <meta charset="UTF-8">    <title>屬性和類名綁定title>    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>head><body><div id="app">    <p>屬性綁定：p>    <a href="https://xueyuanjun.com" v-bind:title="title">學(xué)院君網(wǎng)站a>div><script>    var app = new Vue({        el: '#app',        data: {            title: "致力于提供優(yōu)質(zhì)中文編程技術(shù)學(xué)習(xí)資源"        }    });script>body>html>

注：如果綁定的是其他屬性，則將 v-bind:title 中的 title 替換成對應(yīng)的屬性名即可。

在瀏覽器中預(yù)覽這個 HTML 文檔，將光標(biāo)移到鏈接上，就可以顯示出 title 屬性中設(shè)置的提示文本了：

說明定義在 Vue 對象中的模型數(shù)據(jù)綁定到視圖層 title 屬性成功，我們可以查看源碼進(jìn)行驗證：

v-bind:title 指令中的 v-bind 可以省略，因此下面代碼的效果和上面完全一樣：

<a href="https://xueyuanjun.com" :title="title">學(xué)院君網(wǎng)站a>

類名綁定

類名綁定可以看作是屬性綁定的一個特例，因為 class 本身是 HTML 元素的 class 屬性，只是 class 屬性通常與 CSS 相關(guān)，所以我們單獨(dú)來介紹一番。類名綁定和屬性綁定的語法是完全一致的，只是 class 屬性名是固定的，所以對應(yīng)的指令是 v-bind:class，當(dāng)然，也可以簡寫為?:class。

下面我們來看一個示例，還是在 bind.html 中，編寫對應(yīng)的類名綁定代碼如下：

<html lang="en"><head>    <meta charset="UTF-8">    <title>屬性和類名綁定title>    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>    <style>        .color-red {            color: red;        }        .color-orange {            color: orange;        }        .color-yellow {            color: yellow;        }        .color-green {            color: lawngreen;        }        .color-aqua {            color: aqua;        }        .color-blue {            color: blue;        }        .color-purple {            color: purple;        }        h1 {            width: 120px;            border: 3px dotted;            text-align: center;        }style>head><body><div id="app">    <p>屬性綁定：p>    <a href="https://xueyuanjun.com" :title="title">學(xué)院君網(wǎng)站a>    <hr>    <p>類名綁定：p>    <h1 v-bind:class="curClass">學(xué)院君h1>    <button v-on:click="toggleClass">換個顏色button>div><script>    // 擴(kuò)展數(shù)組方法支持隨機(jī)獲取元素    Array.prototype.getRandomElement = function () {        return this[Math.floor(Math.random() * this.length)]    };    var app = new Vue({        el: '#app',        data: {            title: "致力于提供優(yōu)質(zhì)中文編程技術(shù)學(xué)習(xí)資源",            classes: [                'color-red',                'color-orange',                'color-yellow',                'color-green',                'color-blue',                'color-aqua',                'color-purple'            ],            curClass: 'color-red'        },        methods: {            toggleClass() {                this.curClass = this.classes.getRandomElement();            }        }    });script>body>html>

這個代碼相對復(fù)雜一些，我們分開來看，首先定義的是 HTML 視圖：

類名綁定：學(xué)院君

我們編寫了一個 h1 元素，并通過 v-bind:class="curClass"?將其類名和 Vue 模型屬性 curClass 綁定，這樣一來就可以通過 Vue 對象來動態(tài)設(shè)置它的類名，這一切換通過點(diǎn)擊下面的 button 按鈕來完成，該元素上綁定了點(diǎn)擊事件處理函數(shù) toggleClass。

接下來，我們來看對應(yīng)的 Vue 代碼：

在這段代碼中，首先我們通過 Array.prototype.getRandomElement 為數(shù)組擴(kuò)展了一個隨機(jī)獲取元素值的 getRandomElement 函數(shù)，然后在 Vue 對象的模型屬性中定義了 classes 表示 h1 元素上支持切換的 class 類名，以及 curClass 表示當(dāng)前的類名。

最后，在 methods 中定義了點(diǎn)擊事件處理函數(shù) toggleClass，調(diào)用該函數(shù)時，會從 classes 數(shù)組中隨機(jī)獲取一個顏色類名并將其賦值給 curClass，由于數(shù)據(jù)是雙向綁定的，所以 curClass 的值會同步到 h1 的 class 屬性中。

最后，我們還編寫了一段 CSS 樣式代碼讓類名切換以更直觀的方式呈現(xiàn)出來：