五、Class与Style绑定

最新推荐文章于 2024-12-17 20:47:29 发布

原创最新推荐文章于 2024-12-17 20:47:29 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何使用v-bind动态地绑定class和style。包括通过对象、数组和三元表达式切换class，以及如何设置内联样式和绑定样式对象。这些技巧有助于创建更灵活、响应式的用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class与style绑定

（1）class绑定

+ （1.1）传给v-bind:class一个对象，动态的切换class，例：

<div id="app">
	<div :class="{active:isActive,newfont:changeFont}">
       天气很好
     </div>
</div>
<script>
	new Vue({
		el: "#app",
		data: {
			// 当变量的值为true时div class="active"
 			isActive: true ,
			changeFont: false
		}
	 })	
</script>

+ （1.2）传给v-bind一个数组，例：

<div id="app">
	<div :class="[newDisplay,newFont]">
       天气很好
     </div>
</div>
<script>
	new Vue({
		el: "#app",
		data: {
			// 数组中属性的值为class名称，class="active fontActive"
 			newDisplay: 'active',
            newFont: 'fontActive'
		}
	 })	
</script>

+ （1.3）也可使用三元表达式来切换class,例：

<!--当isActive为false时始终显示errorClass值的class-->
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

（2.）style绑定

+	（1.1）类似于css中的内样样式，通过data数据设置样式，例：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
	new Vue({
		el: "#app",
		data: {
 			activeColor: 'red',
  			fontSize: 30
		}
	 })	
</script>

+ （1.2）直接绑定一个样式对象：通常结合返回对象的计算属性使用。

<div v-bind:style="styleObject"></div>
<script>
	new Vue({
		el: "#app",
		data: {
 			styleObject: {
				color: "red",
				fontSize: '13px'
			}
		}
	 })	
</script>

+ （1.3）也可以使用数组，将多个样式对象应用到同一个元素

<div :style="[styleObject, styleObject2]">天气很好</div>
<script>
	new Vue({
		el: "#app",
		data: {
 			styleObject: {
              width:800 + 'px',
              height: 800 + 'px',
              backgroundColor: 'black',
            },
             styleObject2: {
                 fontSize: 20 + 'px',
                 color : 'yellow' 
           }
		}
	 })	
</script>