初识Vue.js（四）

谁践踏了优雅 2022-05-25 04:54 116阅读 0赞

## 4.1 了解 V-bind指令 ##

在之前，我们已经了解过v-bind的基本用法和以及它的语法糖，主要用法是动态更新HTML元素上的属性。

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

## 4.2 绑定class的几种方式 ##

**4.2.1 对象语法**  
给 v-bind:class 设置一个对象，可以动态的切换class，例如:

<body>
            <div id="app">
               <div :class="{'active':'isActive'}" ></div>
            </div>
            <script src="js/vue.js"></script>
            <script> var app=new Vue({ el:'#app', data:{ isActive:true; } }) </script>
        </body>

上例中，类名active依赖于数据isActive，当其为true时，div会拥有类名active，为false时，则没有。

当class的表达式过长或者逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个的时候，都可以使用data或者computed。  
**4.2.2 数组语法**  
当需要多个class的时候，可以使用数组语法，给class绑定一个数组，应用一个class列表 ，也可以用三元表达式根据条件来切换class。

三元运算符:
    
    如名字表示的三元运算符需要三个操作数。
    
    语法是 条件 ? 结果1 : 结果2;
    这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

使用计算属性给元素动态设置类名，在业务中经常遇到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或者逻辑复杂，硬尽可能的使用计算属性。

## 4.3 绑定内联样式 ##

使用v-bind：style（即：style）可以给元素绑定内联样式，  
方法和：class相似，也有对象语法和数组语法，看起来很像直接在元素上写css。

<body>
            <div id="app">
               <div :style="{'color':color,'fontSize'；fontSize+'px'}">文本</div>
    
            </div>
            <script src="js/vue.js"></script>
            <script> var app=new Vue({ el:'#app', data:{ color:'red', fontSize:15 } }) </script>
        </body>

css属性名称使用驼峰命名，或者短横分隔命名。

大多数情况下，直接写一长串的样式不利于阅读和维护，所以一般写在data或者computed里，以data为例子，改写上面的例子。

<body>
            <div id="app">
               <div :style="styles">文本</div>
    
            </div>
            <script src="img/js/vue.js"></script>
            <script> var app=new Vue({ el:'#app', data:{ styles:{ color:'red', fontSize:15 } } }) </script>
        </body>