4.1.class and style binding
- In the application interface, the style of a certain element(s) is changed
- class/style binding is a technology specially used to achieve dynamic style effects (such as switching styles by clicking a button)
4.1.2.class binding
- :class='xxx'
- Expression is a string: 'classA'
- Expressions are objects: {classA:isA, classB: isB}
- Expression is an array: ['classA', 'classB']
4.1.2.1. :class='xxx'
Examples are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>binding style</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- Have a container ready-->
<div id="root">
<!-- bind class style--String writing, suitable for: The class name of the style is uncertain and needs to be specified dynamically -->
<div class="basic" :class="mood" >{{name}}</div> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Shang Silicon Valley',
mood:'normal',//mood
},
})
</script>
</html>
4.1.2.2. The expression is a string: 'classA'
Binding class style – string writing, suitable for: the class name of the style is uncertain and needs to be dynamically specified
The following example: Click on the div to switch the class style from normal to happy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>binding style--String notation</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- Have a container ready-->
<div id="root">
<!-- bind class style--String writing, suitable for: The class name of the style is uncertain and needs to be specified dynamically -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Shang Silicon Valley',
mood:'normal',//mood
},
methods: {
changeMood(){
this.mood ='happy'
}
},
})
</script>
</html>
Example 2: Click on the div to switch the mood randomly from happy, normal, sad
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>binding style--String writing (switch styles randomly)</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- Have a container ready-->
<div id="root">
<!-- bind class style--String writing, suitable for: The class name of the style is uncertain and needs to be specified dynamically -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Shang Silicon Valley',
mood:'normal',//mood
},
methods: {
changeMood(){
const arr = ['happy','normal','sad']//Put the random styles into an array
const index = Math.floor(Math.random()*3) //Randomly get indices 0, 1, 2
this.mood =arr[index] //Randomly obtained index for style binding
}
},
})
</script>
</html>
4.1.2.3. Expressions are arrays: ['classA', 'classB']
Binding class style – array writing, suitable for: the number of styles to be bound is uncertain, and the name is also uncertain
As the following example: Three styles atguigu1, atguigu2, atguigu3 are bound below, and atguigu4, atguigu5, may be added later. The name may also not be called atguigu1. . . . . (The number is uncertain, the name is also uncertain)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>binding style--array writing</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- Have a container ready-->
<div id="root">
<!-- bind class style--Array writing, suitable for: the number of styles to be bound is uncertain, and the names are also uncertain -->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Shang Silicon Valley',
mood:'normal',//mood
classArr:['atguigu1','atguigu2','atguigu3']
}
})
</script>
</html>
4.1.2.4. Expressions are objects: {classA:isA, classB: isB}
Binding class style – object writing, suitable for: the number of styles to be bound is determined, and the name is determined, but it is necessary to dynamically decide whether to use it or not.
For example, in the following example, determine atguigu1 and atguigu2 to determine the number and name
Use or not? Only in the following cases
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>binding style--Object notation</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- Have a container ready-->
<div id="root">
<!-- bind class style--The object writing method is suitable for: the number of styles to be bound is determined and the name is determined, but it is necessary to dynamically decide whether to use it or not. -->
<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Shang Silicon Valley',
classObj:{
atguigu1:true,
atguigu2:false
}
}
})
</script>
</html>
4.1.3.style binding (learn about usage)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>bind style style</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- Have a container ready-->
<div id="root">
<div class="basic" :style="{fontSize: fsize +'px'}">{{name}}</div> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Shang Silicon Valley',
fsize:40
}
})
</script>
</html>
4.1.3.1. Binding style style – object writing
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>bind style style--Object notation</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- Have a container ready-->
<div id="root">
<!-- bind style style--Object notation -->
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Shang Silicon Valley',
styleObj:{
fontSize: '40px',
color:'red',
}
}
})
</script>
</html>
4.1.3.2. Binding style style - array writing
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>binding style--Object notation</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- Have a container ready-->
<div id="root">
<!-- bind style style--array writing(one) -->
<div class="basic" :style="styleArr">{{name}}</div>
<!-- bind style style--array writing(two) -->
<div class="basic" :style="[styleObj1,styleObj2]">{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'Shang Silicon Valley',
styleObj:{
fontSize: '40px',
color:'red',
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
}
})
</script>
</html>
Summarize
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 should be obtained dynamically.
The object notation is suitable for: to bind multiple styles, the number is uncertain, and the name is also uncertain.
The array writing method is suitable for: to bind multiple styles, the number is determined, and the name is determined, but it is not sure whether to use it or not.
2. style
:style="{fontSize: xxx}" where xxx is a dynamic value.
:style=”[a,b]” where a, b are style objects.