千峰商城-springboot项目搭建-23-vue的class绑定

我们可以使用mustache语法将vue中data数据绑定到HTML标签及标签的属性，如何将data中的值绑定到标签的class及style属性中呢？

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .mystyle1{
                width: 200px;
                height: 100px;
                background: orange;
            }
            .mystyle3{
                width: 200px;
                height: 100px;
                background: black;
            }
            .my-style2{
                border-radius: 10px;
            }
        </style>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        
        <div id="container">
            <!--如果b1为true就加载mystyle1，如果b2为true，则加载mystyle2-->
            <div :class="{mystyle1:b1,'my-style2':b2}"></div>
            
            <!--为class属性加载多个样式名-->
            <div :class="[chooseStyle1,chooseStyle2]"></div>
            
            <!--如果b3为true，则class=‘mystyle3‘，否则class=’mystyle1‘-->
            <!--如果在三目运算中使用样式名，则需加单引号。不加单引号则表示从data变量中获取样式名-->
            <div :class="[b3 ? 'mystyle3':'mystyle1']"></div>
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    b1:true,
                    b2:true,
                    b3:false,
                    chooseStyle1:"mystyle1",
                    chooseStyle2:"my-style2",
                    chooseStyle3:"mystyle3"
                }
            });
        </script>
        
    </body>
</html>

 

 

 
posted @ 2022-07-04 14:04  临易  阅读(53)  评论(0)  编辑  收藏  举报