06vue学习——通过v-bind属性绑定来为元素设置内联样式
前言
有时候我们需要给元素设置内联样式,但是当内联样式过多时,会显得我们的html代码不够整洁美观,那有什么办法可以来解决这个问题呢?别着急,vue已经想到这个问题了,也提供了方法为我们解决——通过v-bind属性绑定来为元素设置内联样式。接下来让我们来看看这个方法如何使用吧!
注意:当样式的名称包含横杠时必须使用引号将对象的属性名包裹起来
1.使用原始的方法,即不使用v-bind指令来进行属性绑定
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过属性绑定来为元素设置内联样式</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div class="body">
<!-- 使用原始的方法,即不使用v-bind指令来进行属性绑定 -->
<h1 style="color:red">{{msg}}</h1>
</div>
<script>
let vm = new Vue({
el:".body",
data:{
msg:"这是用于测试'通过属性绑定来为元素设置内联样式'的文字",
styleObj1:{
"font-weight":200,
color: '#00f',
},
styleObj2:{
"font-weight":200,
color: '#00f',
"font-style":'italic',
}
}
})
</script>
</body>
</html>
这种直接设置方法固然简单,但是当样式很多的时候,我们的html代码就会显得十分的杂乱和丑陋。
2.使用数据绑定来设置内联样式 ——使用一个对象
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过属性绑定来为元素设置内联样式</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div class="body">
<!-- 使用数据绑定来设置内联样式 ——使用一个对象-->
<h2 :style="styleObj1" v-cloak>{{msg}}</h2>
</div>
<script>
let vm = new Vue({
el:".body",
data:{
msg:"这是用于测试'通过属性绑定来为元素设置内联样式'的文字",
styleObj1:{
"font-weight":200,
color: '#00f',
},
styleObj2:{
"font-weight":200,
color: '#00f',
"font-style":'italic',
}
}
})
</script>
</body>
</html>
这种方法将多个样式写在了 Model 模块的data中,需要使用时直接调用对象的名称即可,这样一来,我们的html代码便又是整洁美观的了。
3.使用数据绑定来设置内联样式 ——使用多个对象,则需要使用数组将多个对象引入
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过属性绑定来为元素设置内联样式</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div class="body">
<!-- 2. 使用数据绑定来设置内联样式——使用多个对象,则需要使用数组将多个对象引入-->
<h2 :style="[styleObj1,styleObj2]" v-cloak>{{msg}}</h2>
</div>
<script>
let vm = new Vue({
el:".body",
data:{
msg:"这是用于测试'通过属性绑定来为元素设置内联样式'的文字",
styleObj1:{
"font-weight":200,
color: '#00f',
},
styleObj2:{
"font-weight":200,
color: '#00f',
"font-style":'italic',
}
}
})
</script>
</body>
</html>
这种方法将多个样式写在了 Model 模块的data中的不同对象中,需要使用多个对象的时候,将对象作为数组传入即刻。