孙空空的Vue之路-Day03-Class与Style的绑定操作

小....赵

于 2020-10-23 21:58:47 发布

阅读量155

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_38817451/article/details/109250630

版权

这篇博客介绍了在Vue.js中如何进行class和style的动态绑定操作。通过示例代码展示了如何根据数据变化来改变元素的样式和类名，包括绑定字符串、数组和对象。还提供了一个按钮，当点击时会更新绑定的颜色和字体大小。

摘要由CSDN通过智能技术生成

Class与Style的绑定操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class与style的绑定操作</title>
    <style>
        .aClass {
            color: #ff42b6;
        }

        .bClass {
            color: #ff941e;
        }
    </style>
</head>
<body>

<div id="demo">
    <h1>class与style的绑定操作</h1>
    <!--class可以绑定字符串、数组、对象-->
    <p :class="a">class绑定字符串</p>
    <p :class="{aClass:isA , bClass:isB}">class绑定对象</p>
    <p :style="{color:activeColor , fontSize:fontSize + 'px'}">style的绑定操作</p>

    <button @click="updateColor">点击更改颜色</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#demo',
        data:{
            a:'aClass',
            isA:true,
            isB:false,
            activeColor:'#ff941e',
            fontSize:'20'
        },

        methods: {
            updateColor() {
                this.a = 'bClass',
                this.isA = false,
                this.isB = true,
                this.activeColor = '#ff42b6',
                this.fontSize = '30'
            }
        }
    })

</script>
</body>
</html>