Vue——认识day06_class与style绑定
在Vue中，可以使用v-bind指令来将CSS样式动态地绑定到HTML元素上。有两种方式可以实现CSS与style的绑定：
- 对象语法：可以将一个包含CSS属性和值的对象传递给v-bind，将对象的属性与HTML元素的style属性进行绑定。例如：
<div v-bind:style="{ color: textColor, fontSize: textSize + 'px' }">Hello World</div>
在上面的例子中，textColor和textSize是Vue实例的data属性，可以在Vue实例中定义和修改它们的值。当数据发生变化时，绑定的CSS样式也会相应地更新。
- 数组语法：可以将一个数组传递给v-bind，数组中的每个元素都是一个CSS样式对象。这样可以根据某个条件来动态地切换不同的CSS样式。例如：
<div v-bind:style="[baseStyle, activeStyle]">Hello World</div>
在上面的例子中，baseStyle和activeStyle是包含CSS属性和值的样式对象，可以在Vue实例中定义和修改它们的值。根据某个条件，可以动态地切换不同的样式。
通过v-bind指令，Vue可以实现将CSS样式动态地绑定到HTML元素上，从而可以根据数据的变化来改变样式。这种方式使得前端开发更加灵活和方便。
请看下面的代码示例——绑定class样式：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定样式</title><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;background-color: rgba(255,255,0,0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px solid black;background-color: rgba(0, 255, 68, 0.644);}.normal{border: 4px solid blue;background-color: rgba(0, 81, 255, 0.644);}.masoul1{background-color: yellowgreen;}.masoul2{font-size: 44px;text-shadow: 2px 2px 4px rebeccapurple,-2px -2px 4px skyblue; }.masoul3{border-radius: 10px;}</style><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><div id="root"><!-- 绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态指定的 --><!-- 采用:class作为动态的class来绑定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><hr><br><!-- 绑定class样式——数组写法，适用于：要绑定的样式个数不确定名字也不确定 --><div class="basic" :class="classArr" >{{name}}</div><br><hr><br><!-- 绑定class样式——对象写法，适用于：要绑定的样式个数确定,名字也确定,但要动态决定用不用的 --><div class="basic" :class="classObj">{{name}}</div></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{name:'WenJGo',mood:'normal',classArr:['masoul1','masoul2','masoul3'],classObj:{masoul1:false,masoul2:false}},methods: {changeMood(){// this.mood = 'happy'const arr = ['happy','sad','normal']this.mood = arr[Math.floor(Math.random()*3)]}},});
</script>
</html>请看下面的代码示例——绑定style样式：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定样式</title><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;background-color: rgba(255,255,0,0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px solid black;background-color: rgba(0, 255, 68, 0.644);}.normal{border: 4px solid blue;background-color: rgba(0, 81, 255, 0.644);}.masoul1{background-color: yellowgreen;}.masoul2{font-size: 44px;text-shadow: 2px 2px 4px rebeccapurple,-2px -2px 4px skyblue; }.masoul3{border-radius: 10px;}</style><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><div id="root"><!-- 绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态指定的 --><!-- 采用:class作为动态的class来绑定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><hr><br><!-- 绑定class样式——数组写法，适用于：要绑定的样式个数不确定名字也不确定 --><div class="basic" :class="classArr" >{{name}}</div><br><hr><br><!-- 绑定class样式——对象写法，适用于：要绑定的样式个数确定,名字也确定,但要动态决定用不用的 --><div class="basic" :class="classObj">{{name}}</div><br><hr><br><div class="basic" :style="styleObj">{{name}}</div><br><div class="basic" :style="[styleObj,styleObj2]">{{name}}</div></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{name:'WenJGo',mood:'normal',classArr:['masoul1','masoul2','masoul3'],classObj:{masoul1:false,masoul2:false},styleObj:{// 这里的key不能瞎写，这里是将font-size改的符合vue的要求fontSize: '40px',color:'skyblue',// 像这种原先是使用'-'连接的,就修改为驼峰命名// backgroundColor:'yellow'},styleObj2:{backgroundColor:'orange'}},methods: {changeMood(){// this.mood = 'happy'const arr = ['happy','sad','normal']this.mood = arr[Math.floor(Math.random()*3)]}},});
</script>
</html>
总结、
那么绑定样式这一节就完事啦。
在Vue中，绑定样式的技巧和常用习惯主要有以下几种：
- 使用class绑定：可以通过v-bind:class指令来动态地绑定class样式。可以将一个对象传递给v-bind:class，对象的属性可以是一个布尔值，根据布尔值来决定是否应用该样式，也可以是一个表达式，根据表达式的值来决定应用哪个样式。
例如：
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
- 使用style绑定：可以通过v-bind:style指令来动态地绑定内联样式。可以将一个对象传递给v-bind:style，对象的属性可以是一个字符串，表示样式的属性和值，也可以是一个表达式，根据表达式的值来决定样式的属性和值。
例如：
<div :style="{ fontSize: size + 'px', color: activeColor }"></div>
- 使用计算属性：可以使用计算属性来根据一些逻辑计算出样式的属性和值，然后绑定到元素上。
例如：
<div :style="computedStyle"></div>
computed: {computedStyle: function() {return {fontSize: this.size + 'px',color: this.isActive ? 'red' : 'blue'}}
}
- 使用样式组件：可以使用第三方的样式组件库，例如Element UI、Vuetify等。这些库一般都提供了一些预定义的样式组件，可以直接使用，也可以通过配置参数来动态地绑定样式。
总的来说，Vue中绑定样式的技巧和常用习惯主要是使用class和style绑定指令，以及结合计算属性和样式组件来实现动态绑定样式。这样可以很方便地根据不同的条件和逻辑来决定应用哪些样式。