vue 中的样式的使用

最新推荐文章于 2024-07-12 14:10:05 发布

可爱de蓝胖子

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量695

点赞数 17

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_63757502/article/details/136967996

版权

本文详细介绍了在Vue应用中如何使用class、三目表达式、对象以及函数来动态控制元素的样式，包括类名组合、条件渲染样式和返回值驱动的样式设置。

摘要由CSDN通过智能技术生成

vue 中的样式的使用

一、使用 class 样式

数组

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        .red {
            color: red;
        }
        .fs30 {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="[class1,class2]">字体30px、红色字</div>
        <!-- 等价于 -->
        <div class="red fs30">字体30px、红色字</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            class1: 'red',
            class2: 'fs30'
        },
        methods: {}
    })
</script>
</html>

三目表达式

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        .red {
            color: red;
        }
        .fs30 {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
				<!-- age=10 满足age<18 所以class=class1 -->
        <div :class="age<18?class1:class2">未成年人</div>
        <!-- 等价于 -->
        <div :class="age<18?'red':'fs30'">未成年人</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            age: 10,
            class1: 'red',
            class2: 'fs30'
        },
        methods: {}
    })
</script>
</html>

对象对象的键是样式的名字，值是Boolean类型

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        .red {
            color: red;
        }
        .fs30 {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="{red:true}">显示红色字体</div>
        <div :class="{'red':true}">显示红色字体</div>
        <div :class="{'red':flag}">显示红色字体</div>
        <div :class="{'red':'flag'}">显示红色字体</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            flag: true
        },
        methods: {}
    })
</script>
</html>

数组内置对象

<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <style>
       .red {
           color: red;
       }
       .fs30 {
           font-size: 30px;
       }
   </style>
</head>
<body>
   <div id="app">
       <div :class="[{red:true},{fs30:flag}]">红色字体、字号30px</div>
       <div :class="[{'red':flag},{fs30:'flag'}]">红色字体、字号30px</div>
   </div>
</body>
<script>
   let vm = new Vue({
       el: "#app",
       data: {
           flag: true
       },
       methods: {}
   })
</script>

</html>

二、使用style样式

直接在元素上通过 :style 的形式，书写样式对象

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 键如果包含-的话，必须要加上引号 -->
        <div :style="{color : 'red','font-size' : '30px'}">红色字体、字号30px</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {}
    })
</script>
</html>

对象

<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
   <div id="app">
       <div :style=style1>红色字体</div>
       <div :style=style2>字号30px、字体加粗</div>
   </div>
</body>
<script>
   let vm = new Vue({
       el: "#app",
       data: {
           style1: 'color:red',
           style2: {
               fontSize: "30px",
               "font-weight": 700
           }
       },
       methods: {}
   })
</script>
</html>

数组内置对象

<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
   <div id="app">
       <div :style='[style1,style2]'>红色字体、字号30px、字体加粗</div>
   </div>
</body>
<script>
   let vm = new Vue({
       el: "#app",
       data: {
           style1: {
               'color': 'red'
           },
           style2: {
               fontSize: "30px",
               "font-weight": 700
           }
       },
       methods: {}
   })
</script>
</html>

函数返回值

<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
   <div id="app">
       <div :style='getStyle()'>字号30px、字体红色</div>
   </div>
</body>
<script>
   let vm = new Vue({
       el: "#app",
       data: {},
       methods: {
           getStyle() {
               return {
                   color: 'red',
                   fontSize: "30px",
               }
           }
       }
   })
</script>
</html>