<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>
