Vue的样式绑定
Vue的样式绑定有v-bind:class、v-bind:style,分为内联绑定、非内联绑定、计算属性绑定、数组语法绑定
·
目录
样式的绑定,使用v-bind:class,v-bind:style ,v-bind:class在<style>标签内事先写好样式,再进行名称绑定,v-bind:style在vue实例中直接编写样式再进行绑定。
1、内联绑定
内联绑定即将1元素的class属性直接绑定为对象的形式
<style type="text/css">
.style1 {
color: green;
}
.style2 {
font-size: 50px;
}
</style>
<div id="element">
<div v-bind:class="{ style1 : istrue, style2 : true }">Vue.js内联样式绑定</div>
<div v-bind:style="{ 'color': 'green','font-size': '50px'}">Vue.js内联样式绑定</div>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
var demo = new Vue({
el: '#element',
data: {
istrue: true
}
})
</script>
2、非内联绑定
非内联绑定即将元素的class属性绑定的对象定义在data选项中
<style type="text/css">
.style1 {
color: green;
}
.style2 {
font-size: 50px;
}
</style>
<div id="element">
<div v-bind:class="classObject1">Vue.js非内联样式绑定</div>
<div v-bind:style="classObject2">Vue.js非内联样式绑定</div>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
var demo = new Vue({
el: '#element',
data: {
classObject1:{
style1:true,
style2:true,
},
classObject2:{
'color': 'green',
'font-size': '50px'
}
}
})
</script>
3、使用计算属性返回样式对象
可以为元素的class属性绑定一个返回对象的计算属性
<style type="text/css">
.style1 {
color: green;
}
.style2 {
font-size: 50px;
}
</style>
<div id="element">
<div v-bind:class="classObject1">Vue.js计算属性样式绑定</div>
<div v-bind:style="classObject2">Vue.js计算属性样式绑定</div>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
var demo = new Vue({
el: '#element',
data: {
isStyle1: true,
isStyle2: true
},
computed: {
classObject1: function () {
return {
style1: this.isStyle1,
style2: this.isStyle2,
}
},
classObject2: function () {
return {
'color': 'green',
'font-size': '50px'
}
}
}
})
</script>
4、数组语法进行绑定,支持绑定多个,使用运算法、使用对象
<style type="text/css">
.style1 {
color: green;
}
.style2 {
font-size: 50px;
}
</style>
<div id="element">
<div v-bind:class="[ {style1:isStyle1} ,isStyle2 ? style2 : 'style2' ]">Vue.js数组语法进行样式绑定</div>
<div v-bind:style="[ isStyleObject ? styleObject : styleObject ,{'font-size' : '50px'} ]">Vue.js数组语法进行样式绑定</div>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
var demo = new Vue({
el: '#element',
data: {
isStyle1: true,
isStyle2: true,
style2:'style2',
isStyleObject:true,
styleObject:{
'color': 'green'
}
}
})
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)