Home > Article > Web Front-end > How to add styles to elements in vue
Adding method: 1. Use the ":class="['class name']" statement to add; 2. Use ":class="['class name 1','class name 2',{attribute Name (class name):'Attribute value (true or false)}]"" statement; 3. Use the ":class="{Attribute name (class name):true}" statement; 4. Use ":style="{ 'Style name':'Style value'}"" statement; 5. Use the ":style="style"" statement to add; 6. Use the ":style="[data]"" statement.
The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.
The class name must be enclosed in quotation marks;
1. Array
<h1 :class = "['类名1','类名2']">这种方法 需要用 v-bind: => : 绑定</h1>
2. Use ternary expressions in the array Formula
<h1 :class = "['类名1','类名2',表达式?'类名3':'']">这种方法 需要用 v-bind: => : 绑定</h1>
3. Nested objects in array
<h1 :class = "['类名1','类名2',{属性名(类名):'属性值(true或false)}]">这种方法 需要用 v-bind: => : 绑定</h1>
4. Directly applicable objects
<h1 :class = "{属性名(类名1):true,属性名(类名2):true}">这种方法 需要用 v-bind: => : 绑定</h1>
1. Directly pass:style on the element
<h1 :style = "{'样式名':'样式值'}">这种方法 需要用 v-bind: => : 绑定</h1>
2. Define the style object into data and reference it in :style
<h1 :style = "vue里的样式">这种方法 需要用 v-bind: => : 绑定</h1>
3. In :style, reference multiple style objects on data through an array;
<h1 :style = "[data1,data2]">这种方法 需要用 v-bind: => : 绑定</h1>
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue样式的运用</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 150px;
height: 150px;
background: skyblue;
line-height: 150px;
text-align: center;
}
.border {
border-radius: 50%;
}
.color {
color: #fff;
font-size: 24px;
}
</style>
</head>
<body>
<div id="app">
<button @click="tagger = !tagger">切换</button>
<!-- 添加样式/切换样式 -->
<!-- 对象方式 border 数据模型 tagger 真假 真显示 假隐藏-->
<!-- <div class="box" :class="{'border':tagger}">添加style样式</div> -->
<!-- 表达式 -->
<!-- <div :class="tagger ? 'border' : ''" class="box">添加style样式</div> -->
<!-- 数组 -->
<div :class="tagger ? ['box','border'] : ['box']">添加style样式</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
tagger : true,
vstyle : ['border','box'],
vObj : {"border":true,"color":true,"box":true}
},
methods: {
}
})
</script>
</body>
</html>
(Learning video sharing: vuejs introductory tutorial, Basic programming video)
The above is the detailed content of How to add styles to elements in vue. For more information, please follow other related articles on the PHP Chinese website!