vue 中的更改样式以及组件样式的使用

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

A-linWeb

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

阅读量762

点赞数

文章标签： vue html vue.js html5 css3

本文链接：https://blog.csdn.net/qq_48046110/article/details/108837928

版权

更改样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .redClass {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 普通语法 -->
        <div :class='red'>红色字体</div>
        <!-- 对象语法：布尔表达式成立，使用某个类名 类名中有特殊字符时 用单引号包裹 -->
        <div :class='{redClass: 1==1}'>红色字体</div>
        <div :class='{redClass:true}'>红色字体</div>
        <div :class='classObj'>红色字体</div>
        <!-- 数组中的语法 -->
        <div :class='classObj2'>红色字体</div>
        <div :class='[red]'>红色字体</div>
        <div style="font-weight:700">加粗</div>
        <div :style="{'font-weight':700}">加粗</div>
        <div :style="{'font-weight':weight}">加粗</div>
        <div :style="[colorRed]">红色加粗</div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
               red:'redClass',
               classObj:{redClass:true},
               classObj2:['redClass'],
               weight:500,
               colorRed: {color: 'red', 'font-weight': 700}
            }
        })
    </script>
</body>
</html>

组件样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        .red{
            color: red;
        }
        .fs30{
            font-size: 30px;
        }
        .fstyle{
            font-style: italic;
        }
        .blue{
            color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
       <my-component class="fstyle blue"></my-component>
       <my-component :class="{fstyle: true, blue:false}"></my-component>
       <my-component :class="['fstyle', blue]"></my-component>
    </div>
    <script src="vue.min.js"></script>
    <script>
        Vue.component('my-component', {
            template: `<div class="red fs30">给我设置样式</div>`
        })

        var app = new Vue({
            el: '#app',
            data: {
                blue: 'blue'
            }
        })
    </script>
</body>

</html>

A-linWeb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 中的更改样式以及组件样式的使用

更改样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .redClass {
复制链接

扫一扫