Vue 2 | Part 4 v-bind綁定元素屬性和樣式

時間 2019-12-06

標籤 vue bind 綁定元素屬性樣式简体版

原文原文鏈接

這期跟你們分享的，是v-bind指令。它能夠往元素的屬性中綁定數據，也能夠動態地根據數據爲元素綁定不一樣的樣式。javascript

綁定屬性

最簡單的例子，咱們有一張圖片，須要定義圖片的src。咱們能夠直接在元素的屬性裏面定義：css

<div id="app">
    <img src="https://cn.vuejs.org/images/logo.png" alt="">
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app'
    });
</script>

可是在實際工做中，咱們一般會遇到的狀況是，圖片地址是從數據裏返回的，這個時候v-bind指令就派上了用場。固然，咱們能夠同時綁定各類屬性：html

<div id="app">
    <img v-bind:src="imgSrc" v-bind:alt="imgAlt" v-bind:title="imgTitle">
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://cn.vuejs.org/images/logo.png',
            imgAlt: 'vue-logo',
            imgTitle: '這是你指定的title，主人'
        }
    });
</script>

在瀏覽器能夠看到效果：vue

這時候你也許會說，每次都要寫一遍v-bind好麻煩。沒問題，Vue爲你準備好了簡寫的方式：java

<div id="app">
    <img :src="imgSrc" :alt="imgAlt" :title="imgTitle">
</div>

綁定行內樣式

v-bind也能夠用於綁定樣式，使用行內樣式時，關鍵字是style，跟在html裏面直接寫行內樣式相似。注意樣式的寫法跟css會有些許不一樣，橫槓分詞變成駝峯式分詞。git

<div id="app">
    <button class="btn" :style="{ color: 'white', backgroundColor: 'blue' }">點擊我吧，主人！</button>
</div>

固然，把樣式寫在vue的data裏面會方便一些：github

<div id="app">
    <button class="btn" :style="styles">點擊我吧，主人！</button>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            styles: {
                color: 'white',
                backgroundColor: 'blue'
            }
        }
    });
</script>

在瀏覽器中能夠看到html中的行內樣式：瀏覽器

綁定CSS樣式

更常見的作法確定是根據數據綁定不一樣的樣式了。這時關鍵字是class。app

<style>
    .is-active {
        color: white;
        background-color: green;
    }
</style>

<body>
    <div id="app">
        <!-- 根據數據中isActive來決定是否把is-active這個class加給元素 -->
        <button class="btn" :class="{ 'is-active': isActive }">點擊我吧，主人！</button>
    </div>

    <!-- ... ... -->

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

效果如圖：ide

固然，在實際工做中isActive的值通常不會像例子中這樣直接寫死，而是根據用戶的交互或者數據進行判斷。

這期就到這裏，敬請期待下一期：列表渲染和事件監聽。