Vue--class和style绑定

最新推荐文章于 2024-08-25 09:57:22 发布

Lmq!

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量693

点赞数

分类专栏： vue项目文章标签： vue 前端 javascript

本文链接：https://blog.csdn.net/linmuqi0928/article/details/124300625

版权

vue项目专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文介绍了在 Vue.js 中动态绑定 class 和 style 样式的三种常见方法：字符串写法、数组写法和对象写法。这些方法允许根据数据动态地改变元素的样式，如切换类名或设置 CSS 属性。示例代码展示了如何在不同场景下使用这些方法来实现动态样式效果。

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

绑定class样式三种写法

绑定class样式--字符串写法  适用于：样式的类名不确定 需要动态指定


<body>
<div id="root">
    <!--绑定class样式--字符串写法  适用于：样式的类名不确定 需要动态指定-->
    <div class="basic" :class="mood" @click="changMood">{{name}}</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            mood:'normal',
         
        },
        methods:{
            changMood(){
            
                this.mood = 'happy'
            }
        }
    })
</script>
</body>

绑定class样式--数组写法  适用于：要绑定的样式个数不确定 名字不确定 需要动态指定


<body>
<div id="root">
    <!--绑定class样式--数组写法  适用于：要绑定的样式个数不确定 名字不确定 需要动态指定-->
    <div class="basic" :class="arr" >{{name}}</div>
 </div>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            arr:['at1','at2','at3'],
        
        },
        methods:{
            changMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        }
    })
</script>
</body>

绑定class样式--对象写法  适用于：要绑定的样式个数确定 名字确定 但要动态决定用不用


<body>
<div id="root">
    <!--绑定class样式--对象写法  适用于：要绑定的样式个数确定 名字确定 但要动态决定用不用-->
    <div class="basic" :class="classObj" >{{name}}</div><br/><br/>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            classObj:{
                at1:false,
                at2:false
            },
        },
        methods:{
        }
    })
</script>
</body>
</html>

绑定style样式写法

注意fontSize和backgroundColor单词写法


<body>
<div id="root">
    <!--绑定style样式--对象写法  -->
    <div class="basic" :style="{fontSize: fsize+'px'}">{{name}}</div><br/><br/>
    <div class="basic" :style="styleObj">{{name}}</div><br/><br/>
   <!--绑定style样式--数组写法  -->
    <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div><br/><br/>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            fsize:40,
            styleObj:{
                fontSize: '40px'
            },
            styleObj2:{
                backgroundColor:'orange'
            }
        },
    })
</script>
</body>
</html>

Lmq!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue--class和style绑定

绑定class样式三种写法绑定class样式--字符串写法适用于：样式的类名不确定需要动态指定<body><div id="root">  <div class="basic" :class="mood" @click="changMood">{{name}}</div><script type="text/java
复制链接

扫一扫

专栏目录