How to add styles to elements in vue-Front-end Q&A-php.cn

How to add styles to elements in vue

青灯夜游

Release： 2023-01-12 18:10:39

Original

2563 people have browsed it

Adding method: 1. Use the ":class="['class name']" statement to add; 2. Use ":class="['class name 1','class name 2',{attribute Name (class name):'Attribute value (true or false)}]"" statement; 3. Use the ":class="{Attribute name (class name):true}" statement; 4. Use ":style="{ 'Style name':'Style value'}"" statement; 5. Use the ":style="style"" statement to add; 6. Use the ":style="[data]"" statement.

How to add styles to elements in vue

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Add styles in vue

1. Use class style:

The class name must be enclosed in quotation marks;

1. Array

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;]">这种方法  需要用  v-bind: => :  绑定</h1>

Copy after login

2. Use ternary expressions in the array Formula

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;,表达式?&#39;类名3&#39;:&#39;&#39;]">这种方法  需要用  v-bind: => :  绑定</h1>

Copy after login

3. Nested objects in array

<h1 :class = "[&#39;类名1&#39;,&#39;类名2&#39;,{属性名(类名):&#39;属性值(true或false)}]">这种方法  需要用  v-bind: => :  绑定</h1>

Copy after login

4. Directly applicable objects

<h1 :class = "{属性名(类名1):true,属性名(类名2):true}">这种方法  需要用  v-bind: => :  绑定</h1>

Copy after login

2. Use inline styles;

1. Directly pass:style on the element

<h1 :style = "{&#39;样式名&#39;:&#39;样式值&#39;}">这种方法  需要用  v-bind: => :  绑定</h1>

Copy after login

2. Define the style object into data and reference it in :style

<h1 :style = "vue里的样式">这种方法  需要用  v-bind: => :  绑定</h1>

Copy after login

3. In :style, reference multiple style objects on data through an array;

<h1 :style = "[data1,data2]">这种方法  需要用  v-bind: => :  绑定</h1>

Copy after login

Code example:

<!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>Vue样式的运用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 150px;
            height: 150px;
            background: skyblue;
            line-height: 150px;
            text-align: center;
        }

        .border {
            border-radius: 50%;
        }

        .color {
            color: #fff;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="tagger = !tagger">切换</button>
        <!-- 添加样式/切换样式 -->
        <!-- 对象方式   border 数据模型    tagger 真假 真显示 假隐藏-->
        <!-- <div class="box" :class="{&#39;border&#39;:tagger}">添加style样式</div> -->
        
        <!-- 表达式 -->
        <!-- <div :class="tagger ? &#39;border&#39; : &#39;&#39;" class="box">添加style样式</div> -->
        
        <!-- 数组 -->
        <div :class="tagger ? [&#39;box&#39;,&#39;border&#39;] : [&#39;box&#39;]">添加style样式</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                tagger : true,
                vstyle : ['border','box'],
                vObj : {"border":true,"color":true,"box":true}
            },
            methods: {
            }
        })
    </script>

</body>

</html>

Copy after login

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of How to add styles to elements in vue. For more information, please follow other related articles on the PHP Chinese website!