vue class和style的绑定

最新推荐文章于 2022-06-23 15:36:58 发布

Protagonists

最新推荐文章于 2022-06-23 15:36:58 发布

阅读量156

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/owc1874/article/details/80785587

版权

vue.js 专栏收录该内容

9 篇文章 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>
    <style>
        .red{
            color: red;
        }
        .font{
            font-size: 50px;
        }
        .line{
            text-decoration: underline;
        }
    </style>
    <script src="./vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'.box',
                data:{
                    style01:{
                        "color":"red",
                        "font-size":"30px",
                        "font-weight":"bold"
                    },
                    style02:{
                        "text-decoration":"underline"
                    },
                    isLine:true,
                    claList:['line','font'],
                    oObj:{
                        red:false,
                        font:true
                    },
                    isTrue:true,
                    classStr:'red line'
                }
            })
        }
    
    </script>
</head>
<body>
    <div class="box">

        <!-- style的样式操作 -->
        <p :style="style01">style的样式操作</p>
        <p :style="[style01,style02]">style的样式操作0000000002</p>
        <!-- 类名称的绑定 以下这么多种方式熟练使用一种即可-->
        <p :class="isLine?'line':'red'">三目运算符</p>

        <p :class="claList">列表模式</p>
        <p :class="['red','line']">列表</p>

        <!-- js对象 -->
        <p :class="oObj">js对象</p>
        <!-- {类名称:变量} -->
        <p :class="{line:isTrue}">{类名称:变量}</p>

        <!-- 字符串 推荐熟练使用这种方式!!!-->
        <p :class="classStr">字符串</p>

    </div>
</body>
</html>