1. Definitivamente son posibles el estilo en línea y el estilo selector habituales:
<div style="height:20px;width:20px;background:red"></div>
2. Vue específico
Descripción:
La lista de clases y el estilo en línea de los elementos operativos es un requisito común para el enlace de datos. Porque todos son atributos, entoncesPuede usar v-bind para procesarlos: simplemente use la expresión para calcular el resultado de la cadena.
Sin embargo, la concatenación de cadenas es problemática y propensa a errores. Por lo tanto, al usar v-bind para clase y estilo, Vue.js ha realizado mejoras especiales. Además de las cadenas, el tipo de resultado de la expresión también puede ser un objeto o una matriz.
Puede ser una cadena o una matriz de objetos.
2.1 Hay clase y: clase en la línea, estilo y: estilo pueden ser iguales, y ambos funcionan
<div style="height:50px;width:120px;background:red" :style="{color:activeColor,fontSize:fontSize + 'px'}"> 凡夫俗子</div>
2.2 Clase html vinculante
2.2.1 Sintaxis del objeto
模板：
// {active, color} 不跟布尔表示是true的想法也是错的
<div
class="button_container"
:class="{ active: isActive, color: isColor}"
>
凡夫俗子
</div>
data：
data() {
return {
isActive: true,
isColor: true
};
}
css：
.active {
font-size: 20px;
}
.color {
color: red;
}
看到这里有些人可能有一个想法，改成如下：
这是万万不行的，这样就不是字符串了。
<template>
<div
class="button_container"
:class="styleObject"
>
凡夫俗子
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isColor: true,
styleObject: {
active: this.isActive,
color: this.isColor
}
};
},
created() {
},
methods: {
},
computed: {
},
};
</script>
<style scoped>
.button_container {
width: 207px;
height: 60px;
margin: 35px;
line-height: 60px;
text-align: center;
background: #2e5afb;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
border-radius: 6px;
}
.active {
font-size: 20px;
}
.color {
color: red;
}
</style>
Cuando cambia isActive o isColor, la lista de clases también se actualizará y el intento también se actualizará. Esta es la vista basada en datos.
En este punto, puede utilizar los atributos calculados para cambiar el método de visualización:
<template>
<div
class="button_container"
:class="classObject"
>
凡夫俗子
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isColor: true,
};
},
created() {
},
methods: {
},
computed: {
classObject: function() {
return {
active: this.isActive,
color: this.isColor
}
}
}
};
</script>
<style scoped>
.button_container {
width: 207px;
height: 60px;
margin: 35px;
line-height: 60px;
text-align: center;
background: #2e5afb;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
border-radius: 6px;
}
.active {
font-size: 20px;
}
.color {
color: red;
}
</style>
2.2.2 Sintaxis de matriz
<template>
<div
class="button_container"
:class="[activeClass,colorClass]"
>
凡夫俗子
</div>
</template>
<script>
export default {
data() {
return {
isActive: 'true',
activeClass: 'active',
colorClass: 'color'
};
},
created() {
},
methods: {
},
computed: {
}
};
</script>
<style scoped>
.button_container {
width: 207px;
height: 60px;
margin: 35px;
line-height: 60px;
text-align: center;
background: #2e5afb;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
border-radius: 6px;
}
.active {
font-size: 20px;
}
.color {
color: red;
}
</style>
Cómo realizar una representación condicional con sintaxis de matriz
//会始终添加colorClass的类，但是activeClass会进行条件添加
<div
class="button_container"
:class="[isActive ? activeClass:'', colorClass]"
>
凡夫俗子
</div>
Si hay varios atributos de clase que requieren una representación condicional
<div
class="button_container"
:class="[{active: isActive},colorClass]"
>
凡夫俗子
</div>
2.2.3
Usado en componentes Cuando se usa la propiedad de clase en un componente personalizado,Estas clases se agregarán al elemento raíz del componente. La clase existente en este elemento no se sobrescribirá.
//组件代码
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
Se agregan dos clases al usar:
<my-component class="baz boo"></my-component>
Renderizado final del componente:
<p class="foo bar baz boo">Hi</p>
Por supuesto, también es posible realizar un enlace de datos con el objeto mencionado anteriormente o la sintaxis de estilo de matriz.
<my-component :class="{ active: isActive }"></my-component>
Cuando isActive es verdadero, html se representará como
<p class="foo bar active">Hi</p>