1.关于动态显示页面标签的样式

1.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class与style绑定</title>
    <style>
        li {
            background: #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        li.active {
            background: orange;
        }
        li.box{
            font-size: 20px;
        }
        li.myOn{
            font-style: italic;
        }
    </style>
</head>
<body>

    <div id="app">
        <ul>
            <!-- 注意:如果属性有横线连接符的话 如要单引号将其包裹 如'my-on' -->
            <!-- 像驼峰命名法就不需要这么使用 -->
            <li class="box" :class="{active:isActive,myOn:on}">111</li>
            <li>222</li>
            <li>333</li>
        </ul>

        <br>
        <!-- 通过对象的方式进行绑定 -->
        <ul>
            <li>111</li>
            <li :class="classObj">222</li>
            <li>333</li>
        </ul>

        <br>
        <!-- 绑定内联样式 -->
        <ul>
            <li>111</li>
            <li>222</li>
            <li :style="{color:myColor,'font-size':'50px'}">333</li>
        </ul>
  
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isActive: true,
                on: true,
                classObj: {
                    active: true,
                    myOn:true
                },
                myColor: 'green'
            },
            methods: {

            }
        })
    </script>

</body>
</html>

1.2 显示效果

1.3 在线演示

点击下面链接,即可在线运行

http://www.68yun.top/demo/vue/1.9.html

最后修改:2021 年 02 月 20 日 10 : 24 AM