Vuejs学习笔记04

v-bind及class与style绑定

在数据绑定中,最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定,它们也是HTML的属性,因此可以使用v-bind指令。我们只需用v-bind计算出表达式最终的字符串就可以,不过有时候表达式的逻辑较复杂,使用字符串拼接方法较难阅读和维护,所以Vue.js增强了对class和style的绑定。

绑定class的几种方式

  • 对象语法
    <div id="app">
    <div :class="{ 'active': isActive }"></div>
    </div>
    <script>
    var app = new Vue({
    el: '#app',
    data: {
    isActive: true
    }
    })
    </script>

如上,类名active依赖数据isActive,当其为true时,div会拥有类名Active,为false时则没有,所以得出渲染结果:

<div class="active"></div>

class可以与语法糖:class共存

<div class="static" :class="{ 'active': isActive, 'error': isError }"></div>

0%