This article mainly introduces the method of dynamically binding CSS styles in the Vue framework. By sharing simple examples, we gradually understand the value transfer and binding data in Vue. The introduction is very detailed and has certain reference value. Friends who need it can refer to it. First of all, let's talk about dynamic binding. Relatively, everyone knows static binding. For static binding, you can directly add class="". Dynamic binding must be based on a certain operation of the user to dynamically modify the style, which is more flexible. convenient.
Mainly introduces three binding methods, string, array, object; the specific code is as follows.
<style>
.one{
color: pink;
}
.two{
color: red;
}
.three{
border: 1px solid;
}
.four{
width: 100px;
height: 200px;
background-color: aquamarine;
}
.five{
font-size: 32px;
}
</style>
</head>
<body>
<div id="app">
<p class="one" v-bind:class="twoStyle">change</p>
<p class="one" v-bind:class="arr">change</p>
<p class="one" v-bind:class="objColor">change</p>
<h2 :style="FSizetwo">FFONT-SIZE{{FSizetwo}}</h2>
<h2 :style="FSizethree">FFONT-SIZE</h2>
<button @click="changeStyle">click1</button>
<button v-on:click="randStyle()">click2</button>
<button v-on:click="arrStyle()">click3</button><br/>
input p4 font-size:<input type="text" v-model:value="FontSize">
</div>
<script>
Vue.config.productionTip=false
var vm = new Vue({
el: '#app',
data: {
twoStyle:"two",
objColor:{
two:false,
five:true
},
FontSize:'16px',
arr:[],
/* FSizeone:{
fontSize:"fontSize:"+this.FontSize//undefined????Why???
} */
},
methods: {
changeStyle(){
this.twoStyle="three";
},
randStyle(){
const arr=["three","four","five"];
const index=(Math.random()*3)|0;
this.twoStyle=arr[index];
},
arrStyle(){
this.arr=["three","four","five"];
}
},
computed:{
FSizetwo(){
return "fontSize:"+this.FontSize
},
FSizethree(){
return {
fontSize:this.FontSize,
color:"red"
}
}
}
});
</script>
Comments
Post a Comment