vue动态绑定class和style 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aClass {
            color: red;
        }

        .bClass {
            color: blue;
        }

        .cClass {
            font-size: 30px;
        }
    </style>
</head>

<body>
<div id="demo">
    <h2>1. class样式的绑定，使用套路: :class='xxx' </h2>
    <p :class="a">xxx是字符串</p>
    <!--:class属性值是对象时，key是class类名，value是true的，样式会生效-->
    <p :class="{aClass:isA, bClass:isB}">xxx是对象</p>
    <!--:class的值是数组，元素是class类名-->
    <p :class="['aClass','cClass']">xxx是数组</p>

    <h2>1. style样式的绑定，使用套路: :style='' </h2>
    <p :style="{color:activeColor,fontSize:fontSize+'px'}">style样式的绑定:xxx是对象</p>


    <button @click="update">更新</button>
</div>
<script type="text/javascript" src="lib/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#demo",

        data: {
            a: 'aClass',
            b: 'bClass',
            isA: true,
            isB: false,
            activeColor:'green',
            fontSize:50
        },
        methods: {
            update(){
                this.a = this.b;
                this.isA = false;
                this.isB = true;
                this.activeColor = 'blue';
                this.fontSize = 20;
            }
        }
    });
</script>
</body>
</html>

 

OK!

posted on 2020-03-01 13:59  显示账号  阅读(2080)  评论(0)  编辑  收藏  举报