String writing method: the class name is not sure, it needs to be obtained dynamically
Array writing: To bind multiple styles, the number is uncertain, and the name is uncertain.
style method (keys and values should be named in camel case)
Introduction:
Binding style:
1. class style
Writing: class="xxx" xxx can be a string, an object, or an array.
The string writing method is suitable for: the class name is uncertain and needs to be obtained dynamically.
The object writing method is suitable for: to bind multiple styles, the number is determined, the name is determined, but it is not sure whether to use it or not.
The array writing method is suitable for: to bind multiple styles, the number is uncertain, and the name is uncertain.
2. style style
: style="{fonSize : xxx}" where xxx is a dynamic value, and the key value should be named in camel case.
:style="[a,b]" where a, b are style objects.
class style:
String writing method: the class name is not sure, it needs to be obtained dynamically
Dynamically bind styles via v-bind:
//样式-----------------------------------------
<style>
.basic{
border: 5px solid rgb(77, 191, 252); //边框
width: 400px; //宽
height: 100px; //高
}
.style1{
border: 5px solid rgb(75, 139, 235); //边框
background-color: rgb(20, 117, 122); //背景颜色
color: bisque; //字体颜色
}
.style2{
border: 5px solid rgb(182, 219, 131); //边框
background-color: rgb(222, 171, 203); //背景
color: rgb(16, 23, 29); //字体
border-radius: 10px; //圆角
}
.change1{
background: -webkit-linear-gradient(left,rgb(182, 219, 131),rgb(241, 137, 201)); //渐变背景
}
.change2{
font-size: larger; //大号字体
border-radius: 30px; //圆角
}
</style>
<div id="gjs">
<h1>字符串方法</h1>
<div class="basic" :class="style">
{
{name}} <br>
<button @click="changeStyle">改变样式</button>
</div>
<hr>
<h1>对象方法</h1>
<div class="basic" :class="styleObj">
{
{name}}
<br>
<button @click="changeStyle1">改变样式</button>
</div>
<hr>
<h1>数组方法</h1>
<div class="basic" :class="styleArr">
{
{name}}
<br>
<button @click="changeStyle2">减少样式</button>
<button @click="changeStyle3">增加样式</button>
</div>
<h1>style方法1</h1>
<div class="basic" :style="{fontSize : fsize+'px'}">
{
{name}}
</div>
<h1>style方法2</h1>
<div class="basic" :style="fontSize">
{
{name}}
</div>
</div><body>
//v-bind简写 ： 将样式style1绑定到div :class="style"-------------------------------------------
<div id="gjs" class="basic" :class="style">{
{name}}</div>
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技术',
//定义类名-可以通过绑定事件更改为其他类名更改样式-----------------------------------
style: 'style1',
},
})
</script>
</body> 
You can also add a button to bind the click event to change the parameters, click the button to change the style parameter to style2, and change the style back and forth by adding judgment
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技术',
style: '',
},
methods: {
changeStyle(){
if (this.style == 'style2') {
this.style = 'style1'
} else {
this.style = 'style2'
}
}}Object writing: To bind multiple styles, the number is determined and the name is determined, but it is not sure whether to use it or not.
Control the style change by clicking the button or modifying the value of the object property by the console
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技术',
styleObj:{
change1:false,
change2:false,
}
},
methods: {
changeStyle1(){
if (this.styleObj.change1 == true) {
this.styleObj.change1 = false
this.styleObj.change2 = false
} else {
this.styleObj.change1 = true
this.styleObj.change2 = true
}
}
})
</script>Array writing: To bind multiple styles, the number is uncertain, and the name is uncertain.
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技术',
styleArr:['change1','change2'],
},
methods: {
changeStyle2(){
this.styleArr.shift()
},
changeStyle3(){
this.styleArr.unshift('change1')
}
}
})
</script>Modify the value in the array by binding the event, click reduce to remove the value in the array, click add to add a value to the array to control the change of style
so the background color disappears
style method (keys and values should be named in camel case)
//
<h1>style方法1</h1>
<div class="basic" :style="{fontSize : fsize+'px'}"> //这里的fontSize小驼峰
{
{name}}
</div>
<h1>style方法2</h1>
<div class="basic" :style="fontSize">
{
{name}}
</div> <script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技术',
fsize:40, //方法1
fontSize:{
fontSize:'40px',
}, //方法2这里的fontSize小驼峰
}
})
</script>