|
具体代码
<template>
? <div class="home">
? ? <!-- 绑定一个class -->
? ? ?<div :class="bgc">绑定class</div>
? ? ?<!-- 绑定多个class -->
? ? ?<div :class="[classB, classC]">绑定多个class</div>
? ? ?<!-- 对象绑定 -->
? ? ?<div :class="classobj">对象绑定(对象值为true才显示) -- > 写法1</div>
? ? ?<div :class="{current: true, focus: false}">对象绑定(对象值为true才显示) ?--- > 写法2</div>
? ? ?<div :class="{current: isCurrent, focus: isFocus}">将value设置为变量也可</div>
? ? <!-- 绑定style -->
? ? <div :style="{color: 'red', fontSize: '20px'}">绑定样式 ?对象绑定</div>
? ? <div :style="{color: color, fontSize: ft}">绑定样式 ?对象绑定 ?将属性值设置为变量 </div>
? ? <div :style="styleObj">绑定样式 ?对象绑定 ?将属性值设置为变量 </div>
? </div>
</template>
<script>
export default {
? name: 'Home',
? data () {
? ? return {
? ? ? classA: 'bgc',
? ? ? classB: 'cb',
? ? ? classC: 'cc',
? ? ? classobj: {
? ? ? ? current: true,
? ? ? ? focus: false
? ? ? },
? ? ? isCurrent: true,
? ? ? isFocus: false,
? ? ? color: 'blue',
? ? ? ft: '30px',
? ? ? styleObj: {
? ? ? ? color: 'yellow',
? ? ? ? fontSize: '30px'
? ? ? }
? ? }
? }
}
</script>
?
|