初識VUE(二)

v-bind
縮寫::
預期:any (with argument) | Object (without argument)
參數:attrOrProp (optional)
修飾符:

  • .prop - 被用於綁定 DOM 屬性 (property)。(差別在哪裏?) .camel - (2.1.0+) 將
  • kebab-case 特性名轉換爲 camelCase. (從 2.1.0 開始支持) .sync (2.3.0+)
  • 語法糖,會擴展成一個更新父組件綁定值的 v-on 偵聽器。

用法:
動態地綁定一個或多個特性,或一個組件 prop 到表達式。
在綁定 class 或 style 特性時,支持其它類型的值,如數組或對象。可以通過下面的教程鏈接查看詳情。
在綁定 prop 時,prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
沒有參數時,可以綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。
列子

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script></head><style>    .red{        background-color: red;    }    .width{        width:400px;    }</style><body>    <!-- Vue指令 -->    <!-- 1.v-bind 綁定屬性 -->    <!-- v-bind <==> : -->    <div id="app">       <h4 :class="[{red : true},h5Class]">{{ name }}</h4>        <img v-bind:src="imgUrl" v-bind:alt="name" :style="[{width:imgWidth},imgStyle]"/>    </div>
    <script>        // v-bind 綁定屬性       const vm=new Vue({            el: '#app',            data:{                name:"VUE",                imgUrl:"https://cn.vuejs.org/images/logo.png",                h4Class:'red',                h5Class:'width',                imgWidth: '200px',                imgStyle: {                    border: '10px solid red'                }
            }

        })            </script>
</body></html>

運行結果
在這裏插入圖片描述
點擊變化顏色的小實例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script></head><style>    .red{        background-color: red;    }    .green{        background-color: green;    }    .yellow{        background-color: yellow;    }
</style><body>    <!-- Vue指令 -->    <!-- 1.v-bind 綁定屬性 -->    <!-- v-bind <==> : -->    <!-- 2.v-on:xxx -->    <div id="app">        <button v-on:click="handleClick">點擊</button>        <h4 :class="h4ClassArr[h4Index]">{{ name }}</h4>    </div>
    <script>        // v-bind 綁定屬性       const vm=new Vue({            el: '#app',            data:{                name:"VUE",                imgUrl:"https://cn.vuejs.org/images/logo.png",                h4Class:'red',                h5Class:'width',                imgWidth: '200px',                imgStyle: {                    border: '10px solid red'                },                h4ClassArr:['red','green','yellow'],                h4Index:0,                h4Count:0            },            methods:{                handleClick(){                    this.h4Index= ++ this.h4Count % 3
                }
            }

        })            </script>
</body></html>

運行結果
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章