search

Home >Web Front-end >Front-end Q&A >How to add styles to elements in vue

How to add styles to elements in vue

青灯夜游
青灯夜游Original
2023-01-12 18:10:392679browse

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>

2. Use ternary expressions in the array Formula

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

3. Nested objects in array

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

4. Directly applicable objects

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

2. Use inline styles;

1. Directly pass:style on the element

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

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

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

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

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

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>

(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!

class 对象
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What are the es6 features used in vue?Next article：What are the es6 features used in vue?

Related articles

See more