Vue中样式

作者: 小丘啦啦啦 | 来源:发表于2019-03-01 09:40 被阅读0次

4，如何使用class进行样式的绑定
vue中的样式绑定例子
Vue中样式
vue中的样式
react中样式防止全局污染
5.vue中的样式绑定
ECharts仪表盘样式
修改Element控件的样式
vue：样式穿透
vue 中样式穿透、样式覆盖

一、v-bind(:)绑定class属性
1、数组

<h1 :class="['red','thin']">好烦呀，绘画培训班很怕被坑呀。</h1>

2、数组中使用三元表达式

<h1 :class="['red','thin',flg?'italic':'']">好烦呀，绘画培训班很怕被坑呀。</h1>

3、数组中嵌套对象

<h1 :class="['red','thin',{'italic':flg}]">好烦呀，绘画培训班很怕被坑呀。</h1>

4、直接使用对象

<h1 :class="{red:true,thin:true,'italic':flg,active:false}">好烦呀，绘画培训班很怕被坑呀。</h1>

5、总的说明

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            .red{
                color: red;
            }
            .thin{
                font-weight: 200;
            }
            .italic{
                font-style: italic;
            }
            .active{
                letter-spacing: 0.5em;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 正常使用 -->
            <h1 class="red thin">好烦呀，绘画培训班很怕被坑呀。</h1>
            <!-- v-bind绑定class，值为数组，数组内为class字符串 -->
            <h1 :class="['red','thin']">好烦呀，绘画培训班很怕被坑呀。</h1>
            <!-- 绑定的数组中可以使用三元表达式 -->
            <h1 :class="['red','thin',flg?'italic':'']">好烦呀，绘画培训班很怕被坑呀。</h1>
            <!-- 在数组中嵌套对象来替代三元表达式，提高代码可读性 -->
            <h1 :class="['red','thin',{'italic':flg}]">好烦呀，绘画培训班很怕被坑呀。</h1>
            <!-- v-bind绑定class值也可以是个对象（属性值可带引号也可不带） -->
            <h1 :class="{red:true,thin:true,'italic':flg,active:false}">好烦呀，绘画培训班很怕被坑呀。</h1>
            <!-- 对象也可直接在Vue对象数据里定义 -->
            <h1 :class="classObj">好烦呀，绘画培训班很怕被坑呀。</h1>
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    flg:true,
                    classObj:{red:true,thin:true,'italic':true,active:false}
                }
            })
        </script>
    </body>
</html>

二、使用内联样式/v-bind(:)绑定style属性
1、直接接对象

<h1 :style="{color:'red','font-weight':200}">买了别人不要的课程试试</h1>

2、接定义到Vue对象data中的对象属性名

<h1 :style="styleObj">买了别人不要的课程试试</h1>

3、接数组，引用多个Vue对象data的数据

<h1 :style="[styleObj,styleObj2]">买了别人不要的课程试试</h1>

4、总的说明

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 对象的属性有（-）必须加引号 -->
            <!-- 绑定后面值直接加css样式对象 -->
            <h1 :style="{color:'red','font-weight':200}">买了别人不要的课程试试</h1>
            <!-- 把css样式对象放在Vue对象data中 -->
            <h1 :style="styleObj">买了别人不要的课程试试</h1>
            <!-- 接数组，引用多个data中的样式对象，直接写属性名 -->
            <h1 :style="[styleObj,styleObj2]">买了别人不要的课程试试</h1>
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    styleObj: {
                        color: 'red',
                        'font-weight': 200
                    },
                    styleObj2:{
                        'font-style':'italic'
                    }
                }
            })
        </script>
    </body>
</html>