vue -- 绑定 class与style的方法

目录

 

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