欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue学习06-----CSS样式

程序员文章站 2022-07-04 19:32:49
...

1、class样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            /* 间距 */
            letter-spacing: 0.5em;
        }
    </style>
</head>
</body>
<div id="app">
    <!-- 
            red is not defined
            :会去找vm中的变量
        -->
    <!-- <h1 :class="red">1这是一个h1</h1> -->
    <!--
        1、
        vue绑定class的时候，需要用字符串的形式
    -->
    <!-- <h1 :class="['red','thin']">2这是一个h1</h1> -->
    <!--
        2、
        vue绑定多个class的时候，需要用字符串、数组的形式
        并且可以使用三元表达式
    -->
    <!-- <h1 :class="['red','thin',flag?'active':'']">2这是一个h1</h1> -->
    <!--
        3、
        数组中使用对象{键：值}，代替三元表达式，提高可读性
     -->
    <!-- <h1 :class="['red','thin', {'active':flag} ]">2这是一个h1</h1> -->
    <!--
        4、
        在class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带可不带引号，
        此处没带，属性的值是一个标识符，true为显示，false为不显示
     -->
    <h1 :class="{red:true,thin:true, active:true}">2这是一个h1</h1>
    <!--将clas属性在vm中声明一下，在class绑定即可-->
    <h3 :class="classObj">这是一个h1</h3>

</div>

<body>
    <script src="./lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true,
                classObj: { red: true, thin: true, active: true, italic: true }
            },
            methods: {}
        });
    </script>

</html>

2、内联样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--对象就是无序的键值对集合-->
        <h1 :style="styleObj">这事一个H1</h1>

        <h1 :style="[styleObj,styleObj1]">这事一个H1</h1>
    </div>
</body>
<script src="./lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            styleObj:{color:'red','font-weight':200},
            styleObj1:{'font-style':'italic'}
        },
        methods: {

        }
    });
</script>

</html>

 

上一篇： vue的增删改查

下一篇： 解决nginx 503 Service Temporarily Unavailable方法示例

推荐阅读