vue class、style样式01

最新推荐文章于 2024-04-18 15:01:57 发布

DanielLeefu

最新推荐文章于 2024-04-18 15:01:57 发布

阅读量106

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41579115/article/details/102496405

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <script src="../vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .thin{
            font-weight:bold;
        }
        .italic{
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 第一种方式，直接传递一个数组，注意：这里的 class 需要使用 v-bind 做数据绑定 -->
        <h1 :class="['thin','red']">{{msg}}</h1>
        <h1 :class="['thin','italic', flag ? 'red':'']">{{msg}}</h1>
        <!-- 利用三元表达式 -->
        <!-- 在数组中使用对象来代替三元表达式，来提高代码的可读性 -->
        <h1 :class="['thin','italic',{'red':flag}]">{{msg}}</h1>

        <!-- 再为class 使用 v-bind 绑定对象的时候，对象的属性是类名。由于对象的属性可带引号，也可以不带引号，所以这里没写引号，属性的值为标识符 -->

        <h1 :class="{red: true,thin:false,italic:false}">{{msg}}</h1>

        <h1 :class = "classObj">{{msg}}5</h1>


    <!-- 第二种方法，直接在元素上通过 :style 的形式 -->
    <h1 :style="{color:'blue','font-size':'40px'}">{{msg}}</h1>

    <!-- 定义到data上 -->
    <h1 :style="h1StyleObj">{{msg}}5</h1>
 <!-- 通过数组，引用多个data的样式 -->

    <h1 :style="[h1StyleObj,h2StyleObj]">6666666</h1>

    </div>

   

    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:"这是一个div",
                flag : false,
                classObj: {red: true,thin:false,italic:false},
                h1StyleObj: {color:'blue','font-weight':200},
                h2StyleObj: {'font-style':'italic'}
            },
            methods:{}
        })
    </script>
</body>
</html>

DanielLeefu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue class、style样式01

<!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-U...
复制链接

扫一扫

专栏目录