语法:
:class="对象/数组"
如:详见 3. 案例说明
<div class="box":class="{ 类名1:布尔值,类名2:布尔值 }"></div>
<div class="box":class="对象名"></div>
<div class="box" :class="[ 类名1, 类名2,类名3 ]"></div>
<div class="box" :class="数组名称"></div>
语法:
style="样式对象"
如:详见 3. 案例说明
<div class="box":style="{CSS属性名1:CSS属性值,CSS属性名2:CSS属性值 }"></div>
<div class="box":style="对象名"></div>
<body>
<div id="app">
<!-- 数组形式 -->
<div class="box" :class="divclassArr">数组形式</div>
<!-- 对象形式 -->
<div class="box" :class="divclassObj">对象形式</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- <script src=" ./vue.js"> -->
</script>
<script>
const app = new Vue({
el: '#app',
data: {
divclassArr: ['pink', 'big'], // 数组样式管理
divclassObj: { // 对象样式管理
pink: true,
big: false
}
}
})
</script>
<div id="app">
<!-- style控制 -->
<div class="box" :style="{width:'100px',height:'100px'}"></div>
</div>