vue class和style的绑定

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

原创最新推荐文章于 2022-06-23 15:36:58 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

9 篇文章

订阅专栏

本文通过实例演示了Vue.js中不同样式绑定方法的应用，包括直接绑定样式对象、使用三目运算符、列表模式绑定多个类名及通过JavaScript对象进行动态绑定等技巧。

<!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>