Vue实现样式绑定-蒲公英云

Vue实现样式绑定

怼烎@ 2023-03-14 08:05 90阅读 0赞

<style type="text/css">
        .active{
            border: 1px solid red;
            width:  100px;
            height: 100px;
        }
    </style>
<div id="app">
<div v-bind:class="{active:isactive}"></div> <!--对象绑定-->
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data: {
            isactive: true,
    }
        }
        }
    })
</script>

<style type="text/css">
        .active{
            border: 1px solid red;
            width:  100px;
            height: 100px;
        }
        .active2{
           background-color: aqua;
        }
    </style>
<div v-bind:class="[activeClass,active2Class]"></div> <!--数组绑定-->
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data: {
            activeClass:'active',
            activeClass2:'active2',
        }
    })
</script>

<body>
<div id="app">
<div v-bind:style="{border: borderstyle, width: widthstyle, height:heightstyle }">123</div> <!--内联样式style-->
 <button v-on:click="change">切换框</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascriptt" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data: {
            borderstyle:'1px solid blue',
            widthstyle:'100px',
            heightstyle:'100px',
        }
    })
</script>

<body>
<div id="app">
<div v-bind:style="objectStyle">123</div> <!--内联样式style-->
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascriptt" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data: {
            objectStyle:{
                border: '1px solid red',
                width: '100px' ,
                 height: '100px'
    }
        }
    })
</script>