在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=false
new 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=false
new 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绑定指令，以及结合计算属性和样式组件来实现动态绑定样式。这样可以很方便地根据不同的条件和逻辑来决定应用哪些样式。
