使用vue绑定class样式的写法

作者: Jure_joe | 来源:发表于2020-05-21 14:59 被阅读0次

使用vue绑定class样式的写法
4，如何使用class进行样式的绑定
绑定class样式
5.vue中的样式绑定
vue:样式绑定
vue.js学习笔记四
绑定class和内联样式style | 重学Vue3
vue绑定class和style
angularJs ng-style实际用法
Vue: 样式绑定

1、vue绑定class样式,直接使用数组进行绑定
<div :class="['font','color','italic']">这是第二个标题</div>
2、vue绑定class样式,直接使用三元表达式
<div :class="['font',flag?'color':'','italic']">这是第三个标题</div>
3、vue绑定class样式,直接使用对象代替三元表达式，提高代码可读性
<div :class="['font',{'color':flag1},'italic']">这是第四个标题</div>
4、vue绑定class样式,直接使用对象
<div :class="{'font':true,'color':true,'italic':true}">这是第六个标题</div>
5、 vue绑定class样式,直接使用对象
<div :class="obj">这是第五个标题</div>
全部测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            .font{
                font-size:24px;
            }
            .color{
                color:red;
            }
            .italic{
                font:italic;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- vue绑定class样式 -->
            <div class="font color italic">这是一个标题</div>
            <!-- vue绑定class样式,直接使用数组进行绑定 -->
            <div :class="['font','color','italic']">这是第二个标题</div>
            <!-- vue绑定class样式,直接使用三元表达式 -->
            <div :class="['font',flag?'color':'','italic']">这是第三个标题</div>
            <!-- vue绑定class样式,直接使用对象代替三元表达式，提高代码可读性 -->
            <div :class="['font',{'color':flag1},'italic']">这是第四个标题</div>
            <!-- vue绑定class样式,直接使用对象 -->
            <div :class="{'font':true,'color':true,'italic':true}">这是第六个标题</div>
            <!-- vue绑定class样式,直接使用对象 -->
            <div :class="obj">这是第五个标题</div>
        </div>
        <script type="text/javascript">
            let app = new Vue({
                el:'#app',
                data:{
                    flag:false,
                    flag1:true,
                    obj:{'font':true,'color':true,'italic':true}
                },
                methods:{
                    
                }
            })
            
        </script>
    </body>
</html>