Table of contents
One, v-bind binding class attribute
(1) Binding class style, string writing
(2) Binding class style, array writing
(3) Binding class style, object writing
Two, v-bind binding inline style style
(1) Binding style --- object form
(2) Binding style --- array writing
In the web front-end application, the inline style style of the class list of the operation element is data binding style is a common requirement for data binding, because they are all attributes, so they can be processed with v-bind , but if the style is complex , You need to write a long string of style codes, so string concatenation is more troublesome. Therefore, when using v-bind for class and style, Vue.js has made special enhancements . The type of the expression result can be an object or an array in addition to a string .
One, v-bind binding class attribute
If you want to use the class style (that is, define the style of the element with the class name, the class style generally starts with a "."), you can bind the class attribute through the v-bind command:
(1) Binding class style, string writing
Applicable to: The class name of the style is uncertain and needs to be specified dynamically
<div id="root">
<!-- 绑定class样式，字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" v-bind:class="moon" @click="doChange">
{
{name}}
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: "class和style增强绑定",
moon: "normal"
},
methods: {
doChange() {
var arr = ["happy", "sad", "normal"];
indexof = Math.floor(Math.random() * 3);
this.moon = arr[indexof];
}
}
});
</script>css style:
.happy {
border: 4px solid red;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange);
}
.sad {
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal {
background-color: skyblue;
}Results of the:
(2) Binding class style, array writing
Applicable to: the number of styles to be bound is uncertain, and the names are also uncertain
<div id="root">
<!-- 绑定class样式，数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
<div class="basic" v-bind:class="classarr">
{
{name}}
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: "class和style增强绑定",
classarr: ["text_1", "text_2", "text_3"],
},
methods: {
}
});
</script>css style:
.text_1 {
background-color: yellowgreen;
}
.text_2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.text_3 {
border-radius: 20px;
}Results of the:
(3) Binding class style, object writing
Applicable to: the number and name of styles to be bound are also determined and need to be displayed dynamically
<div id="root">
<!-- 绑定class样式，对象写法,适用于：要绑定的样式个数和名字也确定，需要动态显示 -->
<div class="basic" v-bind:class="classobj">
{
{name}}
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: "class和style增强绑定",
classobj: {
text_1: false,
text_2: true,
text_3: false,
},
},
methods: {
}
});
</script>css style:
.text_1 {
background-color: yellowgreen;
}
.text_2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.text_3 {
border-radius: 20px;
}Results of the:
Two, v-bind binding inline style style
Example of binding to a DOM element via inline (style):
(1) Binding style --- object form
<div id="root">
绑定style样式----对象形式
<br><br>
<div v-bind:style="styleobj" class="basic">
{
{name}}
</div><br><br>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: "class和style增强绑定",
styleobj: {
width: "300px",
height: "100px",
border: "1px solid black",
fontSize: "40px",
backgroundColor: "blue"
},
},
methods: {
}
});
</script>Results of the:
(2) Binding style --- array writing
<div id="root">
绑定style样式----数组写法
<br><br>
<div v-bind:style="stylearr" class="basic">
{
{name}}
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: "class和style增强绑定",
stylearr: [
{width: "300px"},
{height: "100px"},
{border: "1px solid black"},
{backgroundColor:"red"},
{fontSize:"20px"}
],
},
methods: {
}
});
</script>Results of the:
