vue.js样式绑定03(源代码)_vue v-bind:style 源码-CSDN博客

本文链接：https://blog.csdn.net/m0_62788719/article/details/127642115

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.active {

font-style: italic;

}

.default {

text-decoration: underline;

}

.size {

font-size: 18px;

}

.color {

color: #6699FF;

}

.line {

text-decoration: line-through;

}

.size {

font-size: 24px;

}

</style>

</head>

<body>

<h2>一、class属性绑定</h2>

<div v-bind:class="{active: isActive}">Vue.js样式绑定</div>

<div>Vue.js样式绑定</div>

<p>（2）非内联绑定</p>

<div class="default" v-bind:class="classObject">Vue.js样式绑定</div>

<p>（3）使用计算属性返回样式对象</p>

<div class="default" v-bind:class="show1">Vue.js样式绑定</div>

<div v-bind:class="[lineClass,sizeClass]">Vue.js样式绑定</div>

<p>（2）在数组中使用条件运算符</p>

<div v-bind:class="[isLine? 'line':'',sizeClass]">Vue.js样式绑定</div>

<p>（3）在数组中使用对象</p>

<div v-bind:class="[{line:isLine},sizeClass]">Vue.js样式绑定</div>

<h2>二、内联样式绑定</h2>

<div v-bind:style="{ 'font-weight': weight1, 'font-size': fontSize+'px' }">Vue.js样式绑定</div>

<p>（2）非内联绑定</p>

<div v-bind:style="styleObject">Vue.js样式绑定</div>

<p>（3）使用计算属性返回样式对象</p>

<div v-bind:style="show2">Vue.js样式绑定</div>

<div v-bind:style="[{fontSize:'24px'},{'font-weight':'bold'},{'text-decoration':'underline'}]">Vue.js样式绑定</div>

<div v-bind:style="arrStyle">Vue.js样式绑定</div>

<div v-bind:style="[size,weight2,decoration]">Vue.js样式绑定</div>

</div>

let vm = new Vue({

el: '#app',

data: {

isActive: true,

isSize: true,

isColor: true,

isLine: true,

lineClass: 'line',

sizeClass: 'size',

classObject: {

size: true,

color: true

weight1: 'bold',

fontSize: 30,

size: {fontSize:'24px'},

weight2: {'font-weight': 'bold'},

decoration: {'text-decoration': 'underline'},

styleObject: {

fontWeight: 'bold',

'font-size': '30px'

arrStyle:[

{fontSize: '24px'},

{'font-weight': 'bold'},

{'text-decoration': 'underline'}

]

computed: {

show1: function() {

return {

size: this.isSize,

color: this.isColor

}

show2: function() {

return {

fontWeight: this.weight1,

'font-size': this.fontSize+'px'

}

})

</script>

</body>

</html>