vue:v-bind指令动态绑定style和class属性

最新推荐文章于 2024-03-11 10:56:21 发布

_阿锋丶

最新推荐文章于 2024-03-11 10:56:21 发布

阅读量402

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43342105/article/details/105195090

版权

vue 专栏收录该内容

44 篇文章 20 订阅

订阅专栏

v-bind指令动态绑定class属性

在这里插入图片描述

代码：

<body>
    <div id="app">
        <!-- <h2 v-bind :class = "{类名：boolean}"></h2> -->
        <button  id="btn1" v-on:click = "click"><h2 v-bind:class = "{active: isActive,line:false}" >{{message}}"nihoa"</h2></button>
        <button  id="btn2" v-on:click = "click"><h2 v-bind:class = "getClass()" >{{message}}"nihoa"</h2></button>
    </div>
    

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message:"你好",
                active:"active",
                isActive:true
            },
            methods: {
                click:function(){
                    this.isActive=!this.isActive
                    console.log(this.isActive)
                },
                getClass:function(){
                    return {active: this.isActive,line:false}
                }
            }
        });
    </script>
</body>

v-bind指令动态绑定class属性

在这里插入图片描述

代码

前者对象绑定逼数组绑定用得多一些

<body>
    <div id="app">
        <h2 :style = "{key:value,css的属性：属性值}"></h2>
        <h2 :style ="{fontSize : finalSize}">{{message}}</h2>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message:"阿锋",
                finalSize:'100px'
            },
            methods: {}
        });

            console.log(vm)
    </script>
</body>

 <div id="app">
        <h2 :style="[baseStyle]">{{message}}</h2>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message:"阿锋",
                baseStyle: {backgroundColor: 'red'},
                baseStyle1:{fontSize:'100px'}
            },
            methods: {}
        });
    </script>

_阿锋丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue:v-bind指令动态绑定style和class属性

v-bind指令动态绑定class属性代码：<body> <div id="app">  <button id="btn1" v-on:click = "click"><h2...
复制链接

扫一扫