vue笔记-03（在vue中使用样式）
2020-05-05 本文已影响0人
7ColorLotus
- 使用class样式 :class
- 数组,如：:class="['red','word']"
- 在数组中使用三元表达式，如：:class="['red', flag ? 'word' : ' ']"
- 在数组中嵌入对象，使用对象替代三元表达式，提高可读性。如：:class="classObj" 。js对象：classObj : { red : true, word : true }
- 直接使用对象，在为class 使用v-bind绑定对象的时候，对象的属性是类名，对象的属性可带引号，也可不带引号。属性值是一个标识符。但是如果属性中有“-”必须得使用引号
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用样式class</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.red{
color: red;
}
.italic{
font-style: italic;
}
.word{
letter-spacing: 5em;
}
.red-word{
color: red;
letter-spacing: 5em;
}
</style>
</head>
<body>
<!-- html class 设置-->
<!-- <div id="app" class="red italic thin word">
<h1>我是大字体，哈哈</h1>
</div> -->
<!-- 在数组中使用三元表达式 -->
<!-- <div id="app" :class="['red', flag ? 'word' : ' ', {italic : flag} ]">
<h1>我是大字体，哈哈</h1>
</div> -->
<!-- 在数组中嵌入对象 -->
<!-- <div id="app" :class="classObj">
<h1>我是大字体，哈哈</h1>
</div> -->
<div id="app" :class="classObj2">
<h1>我是大字体，哈哈</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag : true,
classObj : {
red : true,
word : true
},
classObj2 : {
'red-word' : true
}
}
})
</script>
</body>
</html>
- 使用内联样式 :style
- 直接在元素上通过:style的形式，书写样式对象。如 :style="{color : activeColor, fontSize : fontSize + 'px'}"
- 将对象定义到data中，并直接引用到:style中，如 :style="styleObj"
- 在:style中通过数组，引用多个data上的样式对象，如 :style="[styleObj, styleObj2]
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用样式style</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 直接在元素上通过:style的形式 -->
<div :style="{color : activeColor, fontSize : fontSize + 'px'}">大家好，我是style样式</div>
<!-- 将对象定义到data中 -->
<div :style="styleObj">大家好，我是style样式</div>
<!-- 在:style中通过数组，引用多个data上的样式对象 -->
<div :style="[styleObj, styleObj2]">大家好，我是style样式</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activeColor: 'red',
fontSize: 30,
styleObj : {
color: 'red',
fontSize: 30 + 'px'
},
styleObj2 : {
'letter-spacing' : 5 + 'em'
}
}
})
</script>
</body>
</html>
