vue怎麼在元素上增加樣式

增加方法：1、用「:class="['類別名稱']」語句新增；2、用「:class="['類別名稱1','類別名稱2',{屬性名(類名):'屬性值(true或false)}]"」語句；3、用「:class="{屬性名(類別名稱):true}」語句；4、用「:style="{ '樣式名稱':'樣式值'}"”語句；5、用“:style="樣式"”語句增加；6、用“:style="[data]"”語句。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

vue中的新增樣式

一、使用class樣式：

類別名稱必須用引號引起來；

1、陣列

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

2、陣列中使用三元表達式

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

3、數組中嵌套物件

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

4、直接適用物件

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

###############################################################################################################。 ########二、使用內聯樣式；############1、直接在元素上通過:style 的形式######

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

##### #2、將樣式對象，定義到data 中，在引用到:style 中######

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

######3、在:style 中透過數組，引用多個data 上的樣式對象；# #####

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

######程式碼實例：######

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>

###（學習影片分享：###vuejs入門教學###、###程式設計基礎影片###） ###

以上是vue怎麼在元素上增加樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！