操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
class样式：
对象语法：v-bind:class
我们通过对象语法的形式可以实现，根据下面这个例子说明一下。
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
或者
```html
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
不管是CSS的形式和内联形式，当isActive为true的时候，CSS属性isActive就会将元素设置其对应的样子，为false的时候，就不会发生其属性的变化。
还有一种是数组形式的:
```html
<div class="basic" :style="styleObjArr">{{China}}</div>
calssArr: ['s1', 's2', 's3']
其中s1,s2,s3指的是css定义的属性
还有这样的：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
或者
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
style绑定：
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
直接绑定到一个样式对象通常更好，就像下面这样：
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
其数组语法如下：
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>
或者这样的形式：
<div class="basic" :style="styleObjArr">{{China}}</div>
data: {
styleObjArr:[{
fontSize: '40px',
color:'red',
},{
backgroundColor:'purple'
}]
}
现在我们在具体代码里是如何使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VUE的样式绑定</title>
<style>
* {
margin: 0;
}
.basic {
width: 400px;
height: 200px;
border: 1px solid black;
}
.normal {
background-color: skyblue;
}
.happy {
border: 4px solid red;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.s1 {
background-color: yellowgreen;
}
.s2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.s3 {
border-radius: 20px;
}
.circular {
/*
这是一个圆
*/
background-color: aqua;
border-radius: 50px;
width: 100px;
height: 100px;
margin: 100px 100px;
text-align: center;
}
.triangle {
/*
三角形
*/
width: 0;
height: 0;
border-left: 69px solid transparent;
border-right: 69px solid transparent;
border-bottom: 120px solid rgb(30, 74, 92);
margin: 100px 100px;
text-align: end;
}
.rectangle {
width: 120px;
height: 90px;
background-color: rgb(61, 55, 55);
margin: 100px 100px;
text-align: center;
}
.ellipse {
/*
椭圆
*/
width: 200px;
height: 100px;
background-color: rgb(94, 34, 112);
border-radius: 100%;
-o-border-radius: 100%;
-ms-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
margin: 100px 100px;
text-align: center;
}
.d {
width: 180px;
height: 120px;
border: 4px solid red;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
margin: 100px 100px;
text-align: center;
}
</style>
<script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="demo">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<h2>绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定</h2>
<div class="basic" :class="mood" @click="changeMood">{{China}}</div>
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<h2>绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定</h2>
<div class="basic" :class="calssArr">{{China}}</div>
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<h2>绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用</h2>
<div class="basic" :class="classObjArr">{{China}}</div>
<!-- 绑定style样式--对象写法 -->
<h2>绑定style样式--对象写法</h2>
<div class="basic" :style="styleObj">{{China}}</div>
<!-- 绑定style样式--对象写法结合数组 -->
<h2>绑定style样式--对象写法结合数组</h2>
<div class="basic" :style="[styleObj,styleObj1]">{{China}}</div>
<h2>绑定style样式--对象写法结合数组,优化一下</h2>
<div class="basic" :style="styleObjArr">{{China}}</div>
<!--我们可以实现这样一个案例，就是点击按钮会随机改变div的形状-->
<div style="width: 100%;height:20px;background-color: rgb(132, 0, 255);"></div>
<h2>我们可以实现这样一个案例,就是点击按钮会随机改变div的形状</h2>
<div class="basic" :class = "shape"></div>
<button @click = "changeShape">形状改变按钮</button>
<div style="width: 100%;height:20px;background-color: aqua;"></div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#demo",
data: {
China: '中国',
mood: 'normal',
calssArr: ['s1', 's2', 's3'],
classObjArr: {
s1: true,
s2: true,
s3: false
},
styleObj: {
fontSize: '40px',
color:'red',
},
styleObj1:{
backgroundColor:'orange'
},
styleObjArr:[{
fontSize: '40px',
color:'red',
},{
backgroundColor:'purple'
}],
shape:'rectangle'
},
methods: {
changeMood() {
//this.mood = "happy";
const moodArr = ['normal', 'happy', 'sad'];
const index = Math.floor(Math.random() * 3);
this.mood = moodArr[index];
},
changeShape(){
//console.log("div形状改变了");
const shapeArr = ['circular', 'triangle', 'ellipse'];
const index = Math.floor(Math.random() * 3);
this.shape = shapeArr[index];
console.log(shapeArr[index]);
}
},
});
</script>
</body>
</html>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
