How to add styles to elements in vue

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.

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>这种方法  需要用  v-bind: => :  绑定</h1>

2. Use ternary expressions in the array Formula

<h1>这种方法  需要用  v-bind: => :  绑定</h1>

3. Nested objects in array

<h1>这种方法  需要用  v-bind: => :  绑定</h1>

4. Directly applicable objects

<h1>这种方法  需要用  v-bind: => :  绑定</h1>

2. Use inline styles;

1. Directly pass:style on the element

<h1>这种方法  需要用  v-bind: => :  绑定</h1>

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

<h1>这种方法  需要用  v-bind: => :  绑定</h1>

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

<h1>这种方法  需要用  v-bind: => :  绑定</h1>

Code example:

nbsp;html>



    <meta>
    <meta>
    <meta>
    <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>



    <div>
        <button>切换</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>添加style样式</div>
    </div>

    <script></script>
    <script>
        let vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                tagger : true,
                vstyle : [&#39;border&#39;,&#39;box&#39;],
                vObj : {"border":true,"color":true,"box":true}
            },
            methods: {
            }
        })
    </script>

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