【Vue样式绑定】

最新推荐文章于 2024-09-11 22:09:42 发布

SimminonGarcia

最新推荐文章于 2024-09-11 22:09:42 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000010506308

版权

HTML样式的绑定无非就Class和Style的绑定，使用Vue的时候原生的绑定形式仍然可以使用，但是既然都使用了Vue了，还是建议遵循Vue的语法规范。

一. 绑定 HTML Class

1.1 对象语法

之前我们说过，html中绑定属性的方式是使用【v-bind】，那么 class 的绑定也一样

<body>
    <div id="app">
        <div v-bind:class="{ active: isActive }"></div>
    </div>
</body>

上面代码中我们使用【v-bind】为class绑定了一个对象，对象中 active 为class的名称，样式是否生效取决于 isActive 是否为真值。

<body>
    <div id="app">
        <div v-bind:class="{ active: isActive,important:isport }"></div>
        <!-- <div class="active"></div> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            isport: false,
        }
    })
</script>

上面代码中我们为一个html绑定了多个class,但是只有 active 是生效的，因为 isport 的值为 false ，有了这样的语法之后，我可以直接通过控制数据来控制哪些样式生效。

【在属性的绑定中我们可以使用表达式或者计算属性】

<body>
    <div id="app">
        <div v-bind:class="getClass()"></div>
        <!-- <div class="active"></div> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            isport: false,
        },
        methods: {
            getClass() {
                return {
                    active: this.isActive,
                    important: this.isport
                }
            }
        }
    })
</script>

上面代码中我们在class的绑定中使用了表达式，表达式是一个函数的调用，在函数中我们可以定义更加复杂的样式逻辑和样式列表。

<body>
    <div id="app">
        <div v-bind:class="classList"></div>
        <!-- <div class="active"></div> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            isport: false,
        },
        computed: {
            classList() {
                return {
                    active: this.isActive,
                    important: this.isport
                }
            }
        }
    })
</script>

上面代码中我们使用【计算属性】同样定义了一个样式对象，在计算属性逻辑中我们也可以定义更加复杂的样式列表，有了表达式和计算属性为我们的样式绑定提供了个更加强悍的功能。

1.2 数组语法

上面介绍了对象的语法，可以说很强悍，那么我再整理一下数组绑定样式的写法。

<body>
    <div id="app">
        <div v-bind:class="[isActive,isport]"></div>
        <!-- <div class="active important"></div> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: "active",
            isport: "important",
        }
    })
</script>

上面代码中通过数组的方式定义绑定了2个class属性，其实就是构成了【data】属性值到样式名称之间的映射。
我们同样也可以在数组语法中使用表达式，引用官网的一个例子

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

上面代码中class中始终有 errorClass ，但是 activeClass 是否添加取决于 isActive 是否为真值。

【总结！！】Class的绑定总觉得数组的形式过于繁琐，我们需要定义很多映射关系属性，所以从简洁的角度出发，建议还是使用【对象】的形式。

1.3 组件绑定Class

如果知道组件，那就看一下，不知道的就先跳过吧。
当我们为组件添加class的时候，所有的class会被添加到组件的【根元素上】面，这个根元素上面已经有了的class不会被覆盖。

我们先定义一个组件

Vue.component('hello', {
    template: `
        <div class="root">
            <h1>Hello</h1>
        </div>
    `
})

接下来应用组件，并添加Class

<body>
    <div id="app">
        <hello class="later"></hello>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
    })
</script>

渲染的结果如下

<body>
    <div id="app">
        <div class="root later">
            <h1>Hello</h1>
        </div>
    </div>
</body>

上面代码中，later被添加到了 hello 组件的【根节点】上，上面我们是用的原生的 Class 进行绑定的，接下来我们换成Vue的绑定形式，会发现其实效果是一样的，也是绑定到了【根节点】上面。

<body>
    <div id="app">
        <hello :class="{later:isLater}"></hello>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isLater: true
        }
    })
</script>

二. 绑定内联样式

上面介绍了Class的绑定，我再总结一下内联样式的绑定

2.1 对象语法

在Class的绑定中，对象的属性是Class名称，属性值用于判断该Class是否生效；在内联样式的绑定中，属性是【样式名】，属性值是【样式值】

<body>
    <div id="app">
       <h1 :style="{color:colorVal,fontSize:sizeVal}">BLUE</h1>
       <!-- <h1 style="color: blue; font-size: 20px;">BLUE</h1> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            colorVal: 'blue',
            sizeVal:"20px"
        }
    })
</script>

上面代码将样式对象直接绑定到了HTML元素中，短横线分割的命名被改成了驼峰命名，Vue1.0中这个要求是比较严格的，但是Vue2.0中支持了短横线的命名规则。

上面我们在绑定Class的时候使用了【计算属性】和【表达式】的形式,在内联样式中我们也来玩一下

<body>
    <div id="app">
        <h1 :style="styleList">BLUE</h1>
        <!-- <h1 style="color: blue; font-size: 20px;">BLUE</h1> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            colorVal: 'blue',
            sizeVal: "20px"
        },
        computed: {
            styleList() {
                return {
                    color: this.colorVal,
                    fontSize: this.sizeVal
                }
            }
        }
    })
</script>

上面代码使用【计算属性】返回一个对象，用于内联样式，表达式就不演示了，和Class的绑定基本是一样的。

2.2 数组语法

内联样式的数组语法其实就是将对各样式对象用于一个HTML元素，数组中是一个一个的对象

<body>
    <div id="app">
        <h1 :style="[styleList,anotherList]">BLUE</h1>
       <!--  <h1 style="
                    color: blue; 
                    font-size: 20px; 
                    font-weight: bold; 
                    background-color: gray;">BLUE</h1> -->
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            colorVal: 'blue',
            sizeVal: "20px",
            backgroundColor: 'gray',
            fontWeight: "bold"
        },
        computed: {
            styleList() {
                return {
                    color: this.colorVal,
                    fontSize: this.sizeVal
                }
            },
            anotherList() {
                return {
                    backgroundColor: this.backgroundColor,
                    fontWeight: this.fontWeight
                }
            }
        }
    })
</script>

上面代码定义了两个【计算属性】返回两个样式对象，然后绑定到内联样式的数组中，最后解析成注释的那样子。总感觉数组形式的绑定挺麻烦的，反正我不大喜欢用数组进行绑定，但是在分离样式对象的时候还是挺有用的。

SimminonGarcia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue样式绑定】

HTML样式的绑定无非就Class和Style的绑定，使用Vue的时候原生的绑定形式仍然可以使用，但是既然都使用了Vue了，还是建议遵循Vue的语法规范。一. 绑定 HTML Class1.1 对象语法之前我们说过，html中绑定属性的方式是使用【v-bind】，那么 class 的绑定也一样<body> &l...
复制链接

扫一扫