vue怎麼在元素上增加樣式-前端問答-PHP中文網

vue怎麼在元素上增加樣式

青灯夜游

發布： 2023-01-12 18:10:39

原創

2540 人瀏覽過

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

vue怎麼在元素上增加樣式

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

vue中的新增樣式

一、使用class樣式：

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

1、陣列

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

登入後複製

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

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

登入後複製

3、數組中嵌套物件

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

登入後複製

4、直接適用物件

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

登入後複製

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

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

登入後複製

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

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

登入後複製

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

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

登入後複製

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

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

登入後複製

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

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