前端笔记十在vue中使用样式
Posted 桥本环奈粤港澳分奈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端笔记十在vue中使用样式相关的知识，希望对你有一定的参考价值。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
.red {
color: red;
}
.thin {
font-size: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- 一、使用class设置样例 -->
<h1 class="red thin">class="red thin" 红色瘦长H1样例</h1>
<!-- 使用vue设置样例,第一种：直接传递一个数组，注：这里的class使用v-bind绑定数据 -->
<!-- 类名用单引号括起来,否则会把类名当作变量在data中寻找相应属性 -->
<h1 :class="['thin','italic']">:class="['thin','italic']" 瘦长斜体H1样例</h1>
<!-- 使用vue设置样例,第二种：在数组中使用三元表达式 -->
<h1 :class="['thin','italic',flag?'active':'']">:class="['thin','italic',flag?'active':'']" 瘦长斜体宽松H1样例 </h1>
<!-- 使用vue设置样例,第三种：在数组中使用对象来代替三元表达式，提高代码可读性 -->
<h1 :class="['thin','italic',{'active':flag}]">:class="['thin','italic',{'active':flag}]" 瘦长斜体宽松H1样例</h1>
<!-- 在为class使用v-bind绑定对象时，对象的属性是类名，由于对象的属性可带引号也可不带，所以这里没有写引号；而属性的值是一个标识符 -->
<h1 :class=" {red: true,thin: true,italic: false,active: false}">:class="{red:true,thin:true,italic:false,active:false}" 红色瘦长H1样例 </h1>
<!-- 使用v-bind绑定对象-->
<h1 :class="classObj">:class="classObj" 红色瘦长H1样例</h1>
<!-- 二、使用内联样式 -->
<h1 style="color: red;">H1样例</h1>
<!-- 对象就是无序键值对的集合,属性中包含横线的话，需要使用引号 -->
<!-- 第一种：直接使用v-bind给style设置对象 -->
<h1 :style="{color:'red','font-size':'40px','font-weight':200}">第一种H1:直接使用v-bind给style设置对象</h1>
<!-- 第二种：将样式对象定义到data中，并直接引用到:style中 -->
<h1 :style="h1styleObj"> 第二种H1：将样式对象定义到data中，并直接引用到:style中</h1>
<!-- 第三种：在:style中通过数组，引用多个data上的样式对象 -->
<h1 :style="[h1styleObj,h1styleObj2]">第三种H1：在:style中通过数组，引用多个data上的样式对象</h1>
</div>
<script>
//创建Vue实例，得到ViewModel
var vm = new Vue({
el: "#app",
data: {
flag: true,
classObj: {
red: true,
thin: true,
italic: false,
active: false
},
h1styleObj: {
color: 'red',
'font-size': '40px',
'font-weight': 200
},
h1styleObj2: {
fontstyle: italic
}
},
methods: {}
});
</script>
</body>
</html>
详解见注释
以上是关于前端笔记十在vue中使用样式的主要内容，如果未能解决你的问题，请参考以下文章