07_尚硅谷_Vue_强制绑定class和style

下面我们说下一个，这个比较简单，我们可以快速的过去啊，这个叫class和什么呢？Style的绑定，这里面也有一个测试用例的效果啊，其实这也不是什么功能啊，就是做一个测试。但后面呢，嗯，晚上的时候就可以看这功能自己去写，看看到底要做的跟他一样啊，如果能做到这一点，那就很不错了。首先我们要说一下。绑定class和style，这个是标签的属性嘛，说白了就是我们的和的值应该是个什么呢？动态的字。大家应该要知道我们的我们的项目功能在用户操作以后，是不是界面会发生一定的改变了，这个改变呢有两种可能性，一种是数据。你数据变了，再一种是什么呢。是不是样式发生了变化啊，样式发生了变化，而这两个是不是都用来去控制样式的？是吧？

这个内部也是用控控制样式的吗。啊，OK style肯定控制样式啊，这个首先要对它有一个理解啊，好，下面我们来看一下我们这个车试用率。好，现在呢，我们应该是一个基本上空白的。好，我们要讲两个方面，一个叫class的绑定，一个叫什么style的绑定啊，先写一些基本代码，六一个六创建一个实例是吧，好写一个配置对象，哪一个E号DEMO。这是去管理这片区域是吧，没问题啊，下面再写一个。Data。啊，有的同学一下子一不小心就写成这个，这是有可能的。那这样行吗？不行啊，肯定不止一个同学啊，这很正常，写错是非常正常，你只要找出来就行。好，下面。我们来看啊，呃，现在看第一个叫class的保利，大概就是这样一个语法冒号，Class。

等于一个东西对吧，这是个表达式吧，好，那我们来写一个啊。来个P标签。写个冒号class等于一个什么，这个里面的值最终是不是应该是一个或者多个类名啊？那如果我直接写，譬如说啊，我写一个a class。那说明我要定一个什么东西。大家看着啊，我是不是要去定义一个类名，类名叫A。好，假设我不加这个单引号了。打。什么意思，这是一个什么，这是一个变量吧。能看到吧，啊，当然我肯定不能这么写，我这么写是不是写死了呀？能看到吧，这样他还会改变吗？不能改变呢，对不对，好。

这种语法就是A啊，是一个这样的一个东西。啊，A是个变量，好了，我就写个A啊，就写个A。好，下面呢，来看一下，那也就是说我这个地方得有个什么。A。是不是好，其实它应该的值应该什么类型。是不错啊，是不是概念假设啊，假设我写了一个a class，那我要干嘛去？是不是我要在这个这个里面写个什么标签，就是写什么。D a class。对吧，假设我写的是color，是red。可以吧，嗯。没问题是吧，好下面啊，下面我在这里，我在这里啊，在这个下面再还写个八层。可以吧，我叫更新。可以吧，好，那说明它应该有个什么，怎么写at可等于update可以吧？好，那说明我要再写个配置叫什么买。

写一个方法名update来，我要把这个A。给改一下可以吧，来我改一下。那写个什么呢？比如说z.a等于啊，譬如说b class。可以吧，那说明我还有一个什么内名。嗯。对吧，行b class能看到吧，好就是假设啊，假设它指定的是啊那个卡。啊，为另外一个颜色，假设叫blue吧。啊，小个点是吧，必须要点。能不能看懂啊，应该是能看到的啊，那也就是说我们现在先来看一下看看啊这个效果啊怎么样啊。

哎，这个里面没内容，那看不出来是吧来。实际上我们测的我们这个保定这个叉叉有三种情况，第一种情况它的值是个字符串。现在我们的值最终是不是这不算呢？啊没问题，好，那我们就直接放在这里，让它能显示出来效果是吧，好刷新一下。现在是不是字体颜色是红色的，那我点它一下了蓝色。也就是说我们这个是不是可以变化的一个效果呀，这个状态是可以变化的。能懂吧，这个应该是好懂的，好当我，但是有的时候我们可能还会有这个。我们除了有动态的样式类名，还可能有个固定的。

比如说啊，比如说我们这个地方再有一个类名啊，得需要三个类名来一个点C啊class来我这里面加一个。啊，假设是20PX。有没有看到，好啊，来啊，我们把这个c class给他什么呢。要写进来才能看到效果对吧，那也就是说现在我要问大家，我一刷新我的这一个P标签上面有几个列名。对不？我们是不是有个静态的，有一个动态的值，对不对，最终应该是个合并的效果吧，啊来看一下这个呢，字体看的不算是那么明显啊，我们加大一个。对吧，这样能够看得出来，看它是不是。对不对的，我们也可以去审查一下，看一下这个元素的class是不是有两个。没问题吧，没有问题，其实挺简单的一个事啊。

好，这个呢是比较好说的，下面说啊强制绑定class，它还可以用什么呢。对象，也就是他的值是个对象。来，坐一下。看着我啊。来写写。把这个呢，它它是一个对象啊，是一个对象，好，那这个时候呢，我我就不管右边的不那个静态的，我直接来个冒号class等于。也就是说这个结果应该是个什么？对象，当然你也可以用先用一个变量，可以先用一个B，接着去B里面的值，这个对象也可以，但平常我们可能更多的写在这里。就写这这个对象了吧，好，对应项的语法怎么写的，我跟大家一起大家就能懂啊，看到我啊a class写是类名，接着是个不值。是一个不值，你看我写一下啊，我先把它写完了，大家可能就能懂了，请问现在我这个P应该有几个类别最终会留下来。

对，说明大家懂了，其实没什么，如果它的值是处，那这个类名就会被什么留下来，如果破死了。那就不留。能看到吧，啊，现在是不是只有只有这个颜色啊，但是你说我现在它要变吗？不变，因为我现在是不是写死了呀，那所以这两个值是一个什么呢？动态的值平是1A。一是力，而这个里面是什么？是不是date数据？明白了吧，他是好，假设is be是first。是不是一样还是这样效果？没变，也就是说我这里面是不是还有一个a class加一个命名，好我现在点一下它去更新。

那在这里面，比如说我这个地方可以给它改一改啊，看这里Z点一是A，我把它变为破。你也可以去反答案对不对，好。那下面啊，Z点一之B为数。看一下会不会变化啊来。变了没有变了，本来他是A的，现在变么。懂吗？啊，OK，这个语法，这种语法其实用的挺多的。大家需要懂，还有一个用的不太多的语法，我简单介绍一下就行啊。OK，这个叉叉它是一个数组。也就是冒号class的这个结果是个数组，数组里面写什么呢？写你想要的类名。你想要的类名啊，譬如说我想要啊a class，那你写a class啊，我想要c class，那你就写什么c class。

这能懂吧，啊，当然这个地方是不是可以把它写成变量。这包括整个也都可以写成变量，但这个用的很少，所以我就简单的演示一下，我也不去更新它了，我们先来看一下啊，应该有两个内容吧。对吧，颜色和字体大小嘛，嗯，没有什么问题是吧。啊，这个用的非常少，所以我就不再重点讲了。啊，上面两个其实用的比较多的，第一个呢，其实很好理解，主要是第二个，你要知道这里面传的是一个属性名是什么。类名对吧？啊类名class的名字，而属性值什么类型不类型，如果是true代表什么类名会留下如果是first了。是不是不留下啊，就没有这个类比。这样我们就可以动态的去确定内云。

最终我的样式是不是动态确定的啊，就是这么个事。好，下面啊，除了通过类名控制样式，还有一种控制样式的方式。就是我们在标签里面可以写一种标签叫什么属性，是不是style呀，啊对吧，好。那我们要动态强制把那怎慢冒号先写上，后面是不写代码，但是大家得知道啊。知道一个事情属性，这个style里面的结构是个什么结构。是不是建只队？属性不是要建属性名和属性值吗？对吧，样式的名和样式的值，那我用GS怎么表达他们呢。对吧，我有，我是不是有可能有多个style样式是吧，那你想啊，我现在用GS来表达，怎么表达。

以前可能是大家看到以前可能写一个什么啊，什么color冒号，什么red是吧，就是分号写一个什么background啊，等于一个什么是吧，以前这么写，他现在能这么写吗。不能因为这个里面的是GS代码，现在JS代码这种语法不合法吧。所以肯定是个什么。大括号，而这个大括号是不是代表一个GS对象嘛？好来，下面我们来写一写。比如说啊，我这里面啊，为了简单点，我就直接来这啊。大家可以看一下就懂。就这一个。能看懂吗？啊，那我下面该怎么办？大家想下面我要写什么东西？你要告，你要告诉我啊，如果不知道的话，那就不好说了，我要写什么句？Color。

定义在哪？贝塔里面，对啊，你能回答出这个问题，这个问题就基本上没问题了。这里面是不是要写一个具体的颜色值啊啊OK，随便来一个啊，先来一个right。这么写行吗？行不行不行，因为现在是GS对不对。有没有看到，好，再来一个啊，还有一个什么size。啊，假设是20，我这里面可以写20吧，因为后面有什么B。好，我现在去更新。啊，更新的话，我只需要说下this.active color啊，譬如说等于等于grama可以吧，好，This点方size，比如说假设等于30有变化就能看出来是吧。好，现在我们来看一下。

现在是红色的字体稍微小一些是不是？点更新。有没有变化，有变绿色了吗？字体也变大了。你看最终生成的样式是不是还是我们以前看的那个样子的？能看到吧，注意这个吗。好，这个语法其实并不难，首先大家理解我们对于强制绑定样式啊，绑定class和绑定style的一种需求。就我们需要这个语法。因为我们要改变页面的效果有两种途径，一种是把数据改变对吧，一种是改变什么样式。一旦改变样式，说明我们是要去动态确定样式的。Three。绑定class和绑定style是需要的。有了这个需求以后，下面我们再看它有什么样的语法啊，一个强制绑定class有这样两种情况啊，第三种情况可以不用管它，基本上一种字符串一种对象。

下面这个style呢，要记住它一上来就必须是个什么。对象，别的就没什么了。行，这是这个。