Vue學習之路第五篇:v-bind


v-bind:是Vue提供的用於綁定html屬性的指令。

html中常見的屬性有:id、class、src、title、style等,他們都是以 名稱/值對 的形式出現,如:id="first"

本篇的內容主要是介紹使用v-bind指令動態給這些屬性賦值。

話不多說,上代碼:

<body>
    <div id="app">
        <img v-bind:src="path" style="width: 200px;height: 200px"/>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                path : "img/clock.png"
            }
        });
    </script>
</body>

代碼很簡單,主要分為兩個模塊:前端定義了一個Img標簽,它的src屬性值通過v-bind指令從Vue對象中獲取;js代碼定義了Vue對象,並聲明了data數據。

注意:在src前面我們添加了 “v-bind:” 千萬不要忘了v-bind后面的冒號,規則就是這么定的。

運行結果:

接下來我要向大家介紹v-bind的一種簡寫形式,那就是我們在實際傳遞屬性值數據的時候可以不寫“v-bind”只留屬性名稱前面的冒號即可。

<body>
    <div id="app">
        <img :src="path" style="width: 200px;height: 200px"/>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                path : "img/clock.png"
            }
        });
    </script>
</body>

這里省略了“v-bind”,只在src屬性名前保留了冒號,看下運行結果:

 

結果一樣,大家有興趣可以動手嘗試一下html的其他屬性,畢竟實踐是最好的老師,寫程序要勤動手。

下面我還要占用大家一點時間,講解一個小知識點,先單獨提取出一行代碼進行剖析:

<img v-bind:src="path" style="width: 200px;height: 200px"/>

這里我們對屬性src做了綁定傳值,有時候我們會有這樣的需求:圖片的路徑不是固定的,可能有很多目錄,我們需要動態獲取路徑。假設Vue已經幫我們獲取了圖片服務器的路徑,但是具體的目錄路徑需要我們前端經過處理獲取,再拼接上去。這時我們看以把"path"看做是一個表達式,通過“path + '/pic/a.png' ”的方法動態加載。

<body>
    <div id="app">
        <img v-bind:src="path + 'clock.png'" style="width: 200px;height: 200px"/>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                path : "img/"
            }
        });
    </script>
</body>

運行結果:

 

每天進步一點點!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM