vue动态绑定class(vue如何动态绑定audio)

前端这点事 66 0

 

vue动态绑定class

vue动态绑定class属性

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>vue动态绑定class属性</title>

    <script src="../static/开发版vue/vue.js"></script>

    <style type="text/css">
        .class1 {

            color: red;

            .class2 {

                width: 300px;

                height: 200px;

                border-radius: 20px;

                background-color: red;

            }
    </style>

</head>

<body>

    <div id="app">

        <p :class="{class1}">{{message}}</p> <!-- v-bind的语法糖添加class1属性 -->

        <p :class="{class1, class2}">{{message}}</p> <!-- {类名1:布尔值, 类名2:布尔值} -->

        <button v-on:click="bianse">变色</button> <!-- 当点击变色按钮时调用函数bianse -->

    </div>

    <script type="text/javascript">

        const app = new Vue({

            el: "#app",

            data: {

                message: "大家早上中午晚上好!",

                class1: true // 值为true时就添加这个类名, 为这个类名写过样式了自然就要渲染了

            },

            methods: {

                bianse: function () { // 定义变色函数

                    this.class1 = !this.class1 // 类名取反值 本来是true就取false 本来false就取true

                }

            }

        })

    </script>

</body>

</html>

标签: Vue

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~