vue中class和style的绑定

雨点打透心脏的1/2处 2022-05-20 04:56 242阅读 0赞

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

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

一、class的绑定

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

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

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

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

语法2：数组语法：

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

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 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

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

[vue.js]: https://cn.vuejs.org/v2/guide/class-and-style.html