Vue教程 v-bind:class动态绑定

Posted _否极泰来_

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue教程 v-bind:class动态绑定相关的知识,希望对你有一定的参考价值。

Vue教程(九) v-bind:class动态绑定

v-bind:class 动态绑定样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_bind_css_style</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .active {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
<h3>模板语法</h3>
<div id="app">
    <span v-on:click="btnClick" v-bind:class="{'active':isActive}">{{message}}</span><br/>
    <span :style="getStyles()">{{message}}</span>
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "hello vue!",
            isActive: true,
            fontSize:'24px',
            backgroundColor:'red'
        },
        methods: {
            btnClick: function () {
                this.isActive = !this.isActive
            },
            getStyles:function (){
                return {fontSize:this.fontSize,backgroundColor:this.backgroundColor}
            }
        }

    });
</script>
</body>
</html>

    – 以上为《Vue教程(九) v-bind:class动态绑定》,如有不当之处请指出,我后续逐步完善更正,大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

以上是关于Vue教程 v-bind:class动态绑定的主要内容,如果未能解决你的问题,请参考以下文章

vue动态绑定class

Vue绑定class与绑定内联样式--v-bind

Vue知识整理9:class与style绑定

Vue.js 实战教程 V2.xClass与Style绑定

vue中按钮使用v-bind:class动态切换颜色,两种做法

Vue中Class与Style绑定