1.Vue中使用样式，必须用v-on（缩写成:）绑定
2.在Js中，对象（无序键值对）的类名单引号可以省略，但是属性名中带有连字符等其他特殊字符要用引号隔开，推荐全部都用引号，属性名（键值）必须使用单引号隔开。所以都用单引号不会出错。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<style>
.color{
color:cornflowerblue;
.thin{
font-weight: 200;
.italic{
font-style: italic;
/*意大利斜塔*/
.active{
letter-spacing: 0.5em;
/*设置中文字符串间距，英文的可用word-spacing*/
</style>
</head>
<div id="app">
<h3 class="color italic">陈小帅真的是有点帅的啊</h3>
<!--HTML的使用方式-->
<h3 :class="['color','thin']">陈小帅真的是有点帅的啊</h3>
<!--vue的使用方式，传递一个数组，一定要用单引号隔开。同时需要使用v-on绑定-->
<h3 :class="['color','thin',flag?'active':'']">陈小帅真的是有点帅的啊</h3>
<!--vue第二种使用方式，数组中使用三元表达式-->
<h3 :class="['color','thin',{'active':flag}]">陈小帅真的是有点帅的啊</h3>
<!--vue第三种使用方式，数组中使用对象替代三元表达式，通过键名作为判断的依据-->
<h3 :class="{'active':false,'color':flag,'italic':!flag}">陈小帅真的是有点帅的啊</h3>
<!--vue第四种用法，直接使用对象，v-on指令绑定的属性是类名，可以带引号也可省略，通过一个键作为标识符-->
<!--以上是在Vue中使用样式-->
<div id="app2">
<h3 :style="{color:'lightblue','font-weight':200}">陈小帅是真的长得有点帅的啊</h3>
<!--这里的对象都是无序键值对的集合，如果属性名中带有连字符等其他特殊字符要用引号隔开，推荐全部都用引号-->
<!--通过style直接书写样式-->
<h3 :style="styleObj">陈小帅是真的长得有点帅的啊</h3>
<!--将对象放入data中，然后定义-->
<h3 :style="[styleObj1,styleObj2]">陈小帅是真的长得有点帅的啊</h3>
<!--多个data对象-->
<!--以上内联样式-->
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true
methods:{}
var vm2 = new Vue({
el:'#app2',
data:{
styleObj1:{color:'lightblue','font-weight':200},
styleObj2:{'font-style': 'italic'}
methods:{}
</script>
</body>
</html>
注意：:style绑定
样式
是，不能
使用
常规的css
样式
，如font-size,background-color等，如果用到此类
样式
，需要遵循驼峰命名法，即fontSize，bac
文章目录前言一、基础
样式
绑定1.1、基础
样式
绑定(v-bind:class)1.2、对象与数组形式控制
样式
二、进阶
使用
进阶一：子组件的
样式
绑定进阶二：行内
样式
编写（普通字符串形式与对象形式，推荐对象形式）三、transition标签
使用
(
vue
自带标签)3.1、基本
使用
(配合过渡或动画
使用
以及设置别名)3.2、自定义
样式
名3.3、过渡与动画同时
使用
时如何控制时间？(借助type属性)3.4、
vue
中
使用
js来实现动画(借助钩子函数)四、元素或组件切换动画(mode与appear属性)4.1、回顾切换元素与组
vue
的内
联
样式
也分为对象语法和数组语法。
无论是哪一种绑定class也好，绑定内
联
也好，他们的
样式
都有对象或者数组之分
数组或者对象的关隘在运用了
vue
中的data进行了一个中转：也就是达到数据驱动视图的目的
注意： v-bind：style的语法外观虽然和css语法极其的相似，其实是作为javascript对象存在的。命名的时候用驼峰命名法，如果用短横线命名法的话，需要用引号括起来命名
1、对象语法
//一种：
<div v-bind:style="{ color: activeColor, fo
<input type="button" value="变" @click=" change ">
<p v-bind:style="s " v-bind:class="className">啦啦啦</p>
<p v-bind:style="'...
