vue v-class 多种写法
<div id="app">
<h4>物件写法</h4>
<div class="box" v-Bind:class="{'rotate': isTransform,'bg-danger':boxColor}" ></div>
<!-- vbind 可以使用rotate : true or false 再透过@click 去切换 true or false 也可以写成物件的方式 -->
<p>请为此元素加上动态 className</p>
<hr>
<button class="btn btn-outline-primary" @click="isTransform = !isTransform">选转物件</button>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="classToggle1" v-model="boxColor">
<label class="form-check-label" for="classToggle1">切换色彩</label>
</div>
<hr>
<h5>物件写法 2</h5>
<div class="box":class="objectClass" ></div>
<!-- objectClass本身就是个物件
objectClass.rotate 为true or false
objectClass.bg-danger 为true or false
-不能当作变数所以要把objectClass.bg-danger 改成objectClass['bg-danger'] -->
<p>请将此范例改为 "物件" 写法</p>
<hr>
<button class="btn btn-outline-primary" @click="objectClass.rotate=!objectClass.rotate">选转物件</button>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="classToggle2" v-model="objectClass['bg-danger'] ">
<label class="form-check-label" for="classToggle2" >切换色彩</label>
</div>
<hr>
<h4>阵列写法</h4>
<button class="btn " :class="arrayClass">请操作本元件</button>
<!-- arrayClass 为空阵列
透过v-model 加入class name -->
<p>请用阵列呈现此元件 className</p>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="classToggle3" v-model="arrayClass" value="btn-outline-primary">
<label class="form-check-label" for="classToggle3">切换样式</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="classToggle4" v-model="arrayClass" value="active">
<label class="form-check-label" for="classToggle4">启用元素状态</label>
</div>
<hr>
<h4>绑定行内样式</h4>
<p>请用不同方式绑定以下行内样式</p>
<!-- 加入style的4种方式
{backgroundColor:'red'} 物件
styleObject 变数是物件
styleObject: {
backgroundColor: 'red',
borderWidth: '5px'
},
[{backgroundColor:'red'},{borderWidth:'5px'}] 变数是阵列带物件
[styleObject,styleObject2] 物件1,物件2 -->
<div class="box" :style="{backgroundColor:'red'}"></div>
<div class="box":style ="styleObject"></div>
<div class="box":style ="[{backgroundColor:'red'},{borderWidth:'5px'}]"></div>
<div class="box":style ="[styleObject,styleObject2]"></div>
<hr>
<h5>自动加上 Prefix (每个版本结果不同)</h5>
<div class="box"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isTransform: false,
boxColor: false,
objectClass: {
'rotate': false,
'bg-danger': false,
},
// Array 操作
arrayClass: [],
// 行内样式
// 使用驼峰式命名
styleObject: {
backgroundColor: 'red',
borderWidth: '5px'
},
styleObject2: {
boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
},
styleObject3: {
userSelect: 'none'
}
},
});
</script>
<style>
.box {
transition: all .5s;
}
.box.rotate {
transform: rotate(45deg)
}
</style>