目錄

繫結class方法

繫結的值字串繫結

繫結的值物件方法

繫結的值陣列語法

繫結style方法

繫結的值為字串

繫結的值物件方法

繫結的值陣列方法

繫結class方法

繫結的值字串繫結

<style>
 .bgDiv{
           background-color:orange;
       }
</style>	
<div id="app">
	<div :class="bgCls">這個div背景是 orange</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    new Vue({
        el:'#app',
        data:{
                bgCls:"bgDiv",
            }
      })
</script>
 

繫結的值物件方法

主要應用於動態切換class

<style>
    .bgDiv{
            background-color:orange;
        }
    .textColor{
            color:#ededed;
        }
</style>
	
<div id="app">
	<div :class="{bgDiv,textColor}">這個div背景是 orange</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    new Vue({
        el:'#app',
        data:{
                bgDiv:true,
                textColor:true
            }
      })
</script>
 

繫結的值陣列語法

當一個類需要多個樣式時，則使用陣列來繫結樣式

<style>
    .bgDiv{
            background-color:orange;
        }
    .textColor{
            color:#ededed;
        }
</style>
	
<div id="app">
	<div :class="[bgCls,textCls]">這個div背景是 orange</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    new Vue({
        el:'#app',
        data:{
                bgCls:'bgDiv',
                textCls:'textColor'
            }
      })
</script>
 

繫結style方法

繫結的值為字串

	<div id="app">
		<div :style="styleDiv">這個div背景是 orange</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				styleDiv:'color:red;font-size:16px'

			}
		
		})
	</script>

繫結的值物件方法

	<div id="app">
		<div :style="styleDiv">這個div背景是 orange</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				styleDiv:{
				color:'red',
				backgroundColor:'orange'
				}

			}
		
		})
	</script>

繫結的值陣列方法

	<div id="app">
		<div :style="[styleDiv,styleDiv2]">這個div背景是 orange</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				styleDiv:{
				color:'red',
				backgroundColor:'orange'
				},
				styleDiv2:{
					fontSize:'20px'
				}

			}
		
		})
	</script>