前端笔记十在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中通过属性绑定为元素设置class类样式
vue中通过属性绑定为元素绑定style行内样式
以上是关于前端笔记十在vue中使用样式的主要内容，如果未能解决你的问题，请参考以下文章
没有在 Nuxt + Vue 项目中加载 Markdown 样式
Web前端开发笔记——第二章 HTML语言 第三节 文本格式化标签
如何使用 Sharedpreferences 存储 EditText 样式（粗体、斜体、颜色等）