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的值通常不会像例子中这样直接写死，而是根据用户的交互或者数据进行判断。

这期就到这里，敬请期待下一期：列表渲染和事件监听。

写在最后

源码地址：https://github.com/levblanc/v...

视频攻略：小的不才，为求一赞，自制本期视频攻略在此。