Encuadernación estilo Vue---kalrry
1. Introducción
Hay dos formas de enlazar estilos comunes en vue:
- enlace de estilo de clase
- enlace de estilo
En segundo lugar, enlace de estilo de clase
1. Método de vinculación de objetos
Formato: v-bind:class="{styleClass:flog}"
styleClass: la clase de estilo definida flog
: valor booleano que indica si el estilo se muestra o no
<style type="text/css">
.style1 {
width: 100px;
height: 100px;
border: 1px solid red;
}
.style2 {
background-color: orange;
}
</style>
<body>
<div id="app">
<div :class="{style1:isS1,style2:isS2,....}">vue样式绑定</div>
<button @click="change">切换样式</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isS1: true,
isS2: true
},
methods: {
change() {
this.isS1 = !this.isS1;
this.isS2 = !this.isS2;
}
}
})
</script>
</body>
2. Método de enlace de datos
Formato: v-bind:class="[variable de estilo 1, variable de estilo 2,...]"
Ejemplo
<style type="text/css">
.style1 {
width: 100px;
height: 100px;
border: 1px solid red;
}
.style2 {
background-color: orange;
}
</style>
<body>
<div id="app">
<div :class="[hasBgColor,hasBorder]">vue样式绑定</div>
<button @click="change">切换样式</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
hasBorder: 'style1',
hasBgColor: 'style2'
},
methods: {
change() {
this.hasBgColor = ''
}
}
})
</script>
</body>
3. Método de vinculación de combinación de objeto y datos
ejemplo
<style type="text/css">
.style1 {
width: 100px;
height: 100px;
border: 1px solid red;
}
.style2 {
background-color: orange;
}
</style>
<div :class="[hasBgColor,{style2:flog}]">vue样式绑定</div>
new Vue({
el: '#app',
data: {
hasBorder: 'style1',
flog: true
},
methods: {
change() {
this.flog = !this.flog
}
}
})
Tres, enlace de estilo de clase
1. Enlace de objetos
Formato: v-bind:style="{style:value,...}"
Ejemplo
<body>
<div id="app">
<div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}">vue样式绑定</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
borderStyle:'1px solid red',
widthStyle: '100px',
heightStyle:'100px'
}
})
</script>
</body>
2. Enlace de matriz
La vinculación de matrices se basa en la vinculación de objetos, y los elementos de la matriz son objetos de estilo
Formato: v-bind:style="[style1,style2,…]"
Ejemplo
<body>
<div id="app">
<div v-bind:style="[baseStyle,fontStyle]">vue样式绑定</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
baseStyle: {
border: '1px solid red',
width: '100px',
height: '100px'
},
fontStyle: {
fontFamily: '宋体',
fontSize: '20px',
color:'blue'
}
}
})
</script>
</body>