vue中class和style的绑定

vue.js的官网写的很好哈，我就是为了详细认真的学习一遍，所以才总结的，比较推荐看官网：vue.js

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组

一、class的绑定

语法1：v-bind:class="{类名:表达式}"

表达式计算结果为true时，添加这个class，表达式计算结果为false时，不添加这个class

<li
                v-bind:class="{completed:item.isComplete}"
></li>

v-bind:class指令也可以与普通的class属性共存

<li class="todo"
                v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"
></li>

还可以在对象中添加多个属性，动态添加多个class

<li class="todo"
                v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"
></li>

语法2：数组语法：

我们可以把一个数组传给v-bind:class,以应用一个class列表：

<div v-bind:class="[activeClass, bgClass]"></div>

data: {
  activeClass: 'active',
  bgClass: 'bg'
}

数组中的元素也可以是三元表达式

二、绑定内联样式

语法1：对象语法：v-bind:style="{css属性名:表达式}"

注意：css属性名可以用驼峰式或短横线分割（如果是用短横线分割的方式是，记得要用单引号括起来）

<p v-bind:style="{fontSize:fontSize+'px'}">你的名字是{{list.name}}</p>

<p v-bind:style="{'font-size':fontSize+'px'}">你的名字是{{list.name}}</p>

语法2：直接绑定一个对象：v-bind:style="样式对象"

<div id="wrap">
    <p v-bind:style="font">你的名字是{{list.name}}</p>
</div>
<script>
    var list = {
        name:"donna",
        age:20
    }
    var vm = new Vue({
        el:"#wrap",
        data:{
            list,
            font:{
                fontSize:'40px'
            }
        }
    });
</script>

对象语法常常结合对象的计算属性使用

语法3：数组语法：v-bind:style="[样式对象,...]"

<p v-bind:style="[fontObj,colorObj]">你的名字是{{list.name}}</p>

自动添加前缀：

当v-bing:style使用需要添加浏览器引擎前缀的css属性时，例如transform，Vue.js会自动侦测并添加响应的前缀

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

vue中class和style的绑定

猜你喜欢