00:01
好了,各位小伙伴们大家好,那接下来啊,咱们呢,要完成添加属性中的查看模式与编辑模式的切换。那咱们呢,先去看一下咱们正在开发的这个项目。那么我们啊,刚刚啊,把修改某一个属性的业务啊,完成了一部分。那咱们呢,把其余剩下的一部分业务呢,也给它完成。那首先说,比如说现在老师选择的是三级分类下的这个手机。在这里呢,它呢已经有一个属性了,叫做汽车。以及啊,相应的属性值有什么,有兰博基尼和布加迪,那这是没问题的。那以及呢,也可以进行修改。那咱们呢,先去看一下的数据。那现在展示的这些是什么?展示的是不是服务器给咱们返回的已有的数据?对吧,就是已经有的属性以及相应的属性值了。
01:01
那咱们看一下子,咱们呢,主要盯住这里的数据啊,把这块的业务给他搞定。比如说现在汽车这个属性有没有ID是有的,是3128。那以及啊,也有它相应的属性值,属性值有几个,有两个分别呢,是兰博基尼和布加迪没问题对吧,那咱们呢,给他打开去看一下。那有相应的属性值。以及也有相应的啥是不是属性的ID。对吧,那对于,但是这里面的一定要注意一个小细节。那对于已经有的属性。对吧,啊,还以及还有相应的属性值,那这里面要注意一件事什么事,那就比如说汽车这个已有的属性,那我能不能再添加相应的属性值。这不可以啊,比如说咱们再来一个什么,再来一个啊曹操。对吧,那咱们呢,可以看一下子,那现在这个汽车的这个属性,相应的属性值应该有几个,有三个。
02:07
对不,那第三个不就是咱们刚刚新增的一个属性值吗?这不是曹操吗。但是你会发现一件事,什么事,现在的曹操的这个属性值啊,他是没有ID的。那你这块呢,一定要注意,现在咱们已有的这个属性是不是已经有了。这可不是新增的,是服务器给咱返回的数据进行展示,这代表的是已有的属性,那它有没有相应的ID有,那所以说咱们新增的这个属性值要不要用ID要。对不,那么什么时候应该,哎把这个ID也给他整上呢。那咱们呢,去看一下子,老师呢,也全都给你操作一下子,你看这啊。老师呢,这里面呢,详细的说一下子,比如说你选择的是手机。手机通讯手机,对不?那现在要注意一件事,汽车这个属性代表的是已有的属性了。
03:06
这个数据是服务器返回过来的,而这个属性已经有了相应的ID 3128咱们也看见了。那现在目前而言,这两个属性值代表是不是服务器已经有的属性值了,那是不是有相应的ID,是不是也是3128。那假如说你修改,那你修改当中能不能再新增,那也是可以的。对不对,那比如说咱们再来一个就曹操,那你要注意新增的这个属性值,要不要有ID要用,为什么?因为你相应的这个属性已经有ID了。对不,那么什么时候给这个属性值加ID,很简单,是当你点击添加属性值这个按钮的时候。给他添加新的属性值的时候,那你这块的时候就应该给他的ID带上。那所以说咱们看一下咱们的组件。你看这儿。
04:00
那么当咱们点击添加来老师把这线给它关掉,那这块呢,该折的也给它折上。当咱们点击添加属性。看着啊,点击添加属性值这个按钮的时候,咱们找一下子。添加属性值。这个按钮在这儿。对不看这这不是添加属性值吗?它是有相应的回调的,那咱们呢,是往这个数组里面,咱找一下子添加属性值。对吧,咱们呢,是往这个数组里边push了一条数据。对不,你只要点击一下我是不是push一个对象。而这个对象的ADTD,那不就是你现在的这个展示的这个属性的ID吗。对吧,以及value name,咱们是通过V-model收集什么意思,咱们可以看一下来老师呢,给你展示一下,你盯住数据啊,一定要给我盯住数据,你看这。
05:00
现在啊,老师选择的是手机。手机,通讯手机,那么当老师一点击这个修改按钮的时候,咱们是把这个数组当中的这个汽车的这个元素赋值给了at tr。阴否?对不对,而at tr info就是咱们正在修改的这个属性,那它是已经是有ID了,对不3128,那么以及相应的所有的属性值也是有ID。那你这里面要注意一件事,什么事,那对于修改某一个属性,能不能再新增一个属性值,完全是可以。对不,那对于新增的属性值,目前而言,它的atd是按范value name是没有,那当然咱们可以收集。那你这里面要注意一件事,什么事,那咱们现在正在修改的这个属性的属性值,你可不可以技能可以,那要不要有ID要有。而这个ID是谁?那不就是咱们的at tr info.id吗?
06:01
对不,所以咱们在这push的时候啊,那这块呢,要注意,那这块得改成谁叫face点点,谁是不a t info点。对不对,那这块呢,一定要注意一件事,那么对于修改某一个产品的时候,就是某一个属性的时候。那么可以在已有的属性值。按属性值的基础之上。新增什么,是不是新增新的属性。但是你要注意啊,新增新的属性值。但是你要注意新增。属性值的时候,需要把已有的属性的ID带上。对吧。所以这块呢,一定要注意。这块和谁是有区别的,和这是有区别的,你要注意啊,你看这。
07:00
手机手机通讯,哎,再看这老师再选择一个手机。你这代表的是修改,修改修改的是什么?修改的是已有的属性,那当然它是有ID,你是不是要给他新增的时候是不是要带上,但是有一个地儿,可能有的同学会说,那老师那我添加属性的时候呢。比如咱来一个叫颜色对吧,那添加属性值分别是红色对吧,比如再来一个什么色,绿色。那这是一个新增的属性,那你要注意,对于一个新增的属性,它是没有ID。对不对于一个新增的属性是没有ID的,那所以说咱们的属性值你带的ID是安底范就可以了。对不,那就相当于咱们这儿把修改和添加都给他搞定了。那也就是说对于添加,你看添加一个新的属性。对吧,那你也可以添加新的属性值,那属性值这里老师问你a tr in否有ID吗?没有没有就是啥,就是按比范,那如果a tr代表修改,修改的这个属性是有ID,那你是不是就带上。
08:05
对不,所以这块呢,要注意一下。好了,这是它。那接下来啊,咱们呢,还要说一下子一个小细活,就是谁呢,就是这儿,你看这儿啊,咱们看一下子这个啊,看这。咱们先说谁呢?先说新增手机。手机通讯手机。对吧,咱们先聊聊新增,你看这啊,添加属性。知识已经写好了,比如说老师来一个颜色的属性。我新增一个属性值,比如说叫做红色。对不?那你看他呢,现在是一个音铺的,当一本乐的时候,你会发现他是用一个死半径展示。OK吧,当你再点击这个SPA,又切换为什么input?那也就是说这一列当中的这块啊,它应该是有两个元素进行切换显示的,一个是谁,一个是音谱的,一个是SPA。对不,那比如说再来,再来什么色,再来个黄色。
09:02
对不?你看你本是不是切换成呃SPA,那SPA呢,咱们可以认当做什么,当做的是呃查看模式。当你显示input的时候,咱们可以认为是编辑模式对吧,黄色色。那所以说咱们接下来要完成什么?完成查看模式与编辑模式的切换。对不?那咱们回首看一下咱们正在开发的这个项目,那咱们看一下。那比如说啊手机。手机通讯。手机对不,那这是汽车代表是已有的属性了,咱们这块就先不搞了,咱们新增一个你看。比如说啊,老师来一个颜色。添加属性值,比如说来个什么色黄色。对吧,黄色。那当老师一点击本乐的时候,你看他也没有进行切换,为什么?因为咱们table的这一遍,它只有一个音谱的,它没有别的元素。
10:00
对吧,那咱们呢,可以看一下咱们的结构,看下咱们的结构。他呢,应该是table的第二列,找一下table。对吧,Table的第二点,你看这老师呢,给他哎往上提提,这会好看一些啊,你不提着往上一堆还挺难受的,你看这。这块的结构当中啊,它只有一个音铺的,所以说它没办法再显示一个死SPA。对不,那你这块要注意这一列当中这个table这啊,记住第二列这那这块展示的要么是input,要么是谁,要么是SPA。对不来手机,手机通讯手机,比如说你现在这展示的是谁,你展示的比如说来一个颜色。对吧,来个啥黄色。那你这块目前他只能展示一个,谁只能展示一个音谱。那你将来还有一个元素和它经来回切换,就是谁,就是SPA。对不?那SPA展示的谁,其实就是咱们的肉的肉谁肉是不是咱们每一个啥说每一个。
11:05
注意啊,是每一个相应的属性值。对吧,肉的什么value。对,不应该是input和SPA这两个元素经切换展示。对吧,那咱们呢,可以慢慢的调一下看一下。对吧,哎,当然咱们现在可能看不见颜色,对吧,你给他搞一个对吧,别人给来个123对吧,那你看底下这是不是一个是音谱。对吧,一个是一个是死半,但是你要注意这两个元素它能同时存在吗?不能。对吧,水火不容要么有阴铺的,没谁没死绊,有死绊没阴铺的,也就是说他两个要么显示,要么隐藏,而且是水火不容的。那所以说怎么办呢。那在这里呢,老师写一下子,比如说这里的结构。对吧,哎,结构。哎,结构那么需要用到谁死SPA与input进行来回的什么来回的切换。
12:07
哎,来回的切换。你想这个元素你就想想,就比如说你认真琢磨琢磨,你就就比如说这个音谱的它时而展示,时而隐藏,你想到了谁。对不,你看嘛。对于这个音谱的,来一个颜色。对于咱就说这个音铺的,你看它时而展示。对吧,时而隐藏,那你想到谁?要么是V纲受,要么是V纲一。对吧,那为了方便一些啊,更好判断一些,咱们可以来个啥v if。对,不有你没我,有我没他,但是你要想明白一件事,什么事。那假如说你这块写个V-if v-if。对吧,那假如说这块写处没问题,那显示谁是不是显示咱们的这个这个这个这个input,那这块你就可以写谁写V-V-else。对吧,那你看现在是不是只是显示谁刷新啊,咱们看一下咱们这个手机。
13:04
手机,通讯手机,你看目前是不是只展示谁只展示。对不对。对吧,那假如说,那假如说老师把这改成谁改成false。那应该展示展示的是不是应该是死SPA?对吧,咱刷新那SPA可能没有数据啊,但是你应该看不见谁看不见这个这个这个这个。看不见这个input。对不?你看你只能看见谁看见的是死SPA,咱们可以审查元素,你看一下它是不是死的。对吧,咱们看一下它里面应该有的是死瓣,咱找一下结构。对不对。对吧,只不过宽高没有是零零。那所以说啊,咱们需要有一个,哎,有一个标记去标记什么呢?标记这个input和span,到底谁显示谁隐藏,这怎么办。对不说老师啊,这个简单啊。
14:00
那你找到咱们date这啊,找到date这,你给它加一个flag呗。加个标记,为啥为处。对吧,那咱们看那这块你就可以替换成谁,替换成咱们的flag。对不,那现在是没毛病的,你看一下子,那现在应该显示的是谁来一点点调调,现在显示的应该是input。对吧,显示的应该是input,你看比如说颜色。添加属性值,比如说黄色。对不没问题,那当你一点击博乐的时候,是不是应该显示SPA。对吧,那应该变为什么?就是他一本乐的时候应该变为查看模式,对吧,就是显示SPA,那就艾特谁不乐。对,不,为什么,那咱们的flag是不是应该为false?对吧,那咱们看一下有没有那点意思。还是得刷新。那咱们一点点调啊,手机手机通讯手机走,你看老师来一个颜色,什么色呢?比如说咱给他来一个黄色,你看当你一本乐的时候,是不是显示啊死SPA。
15:05
对吧,那以及当你点击点击span的时候,是不是要切换为input。那这个也简单,那这个怎么整,那这呢,那无非就是给他也绑定个单机事件,给SPA1点击,让咱们的flag。为啥为真?对吧,那是不是就是显示谁了,显示input。对不,那咱们再刷新一点点测一下看一下。对吧,但是这么搞其实是有问题的,咱们一会儿再说对吧,颜色。走,比如说来一个黄色。走。对不?是不是感觉没问题啊。对,不但是这里面呢,你要注意一件事啊,注意一件事。除了博乐,哎,除了博乐可以切换为查看模式,就是显示那个SPA以外,还有个地,你看人家已经写好这个啊,你看。走红色123,我摁的是回车,它也能切换,为啥?是不是切换为SPA?
16:02
所以说啊,咱们这儿呢,再给他加一个就这。艾谁艾,Keep up?但是啊,你要注意一件事,这可不是原生的道事件,它是属于自定义事件。对吧,因为修饰符enter,它只能用于down时间。对吧,原生到时间,所以说啊,咱们给它变成原生的时间,就是耐。第二谁第二恩特?那他要做的一件事跟前面不一样吗?不就是flag为什么为false吗?这啥意思?多了一个摁回车的时间。咱们呢,可以看一下咱们的这个啊,可以看一下。手机。手机通讯。手机对吧,点击添加属性颜色。找你,你看老师来个123,我摁回车,它也可以切换为SPA对吧,你点击SPA是不是也可以切换为音input。对吧,那有的同学说老师这so easy啊,但是你要想明白一件事啊。
17:00
你现在要这么玩,你添加一个属性值是可以的,那如果是多个,如果多个你用同一个信号量,就是同一个属性控制。它会出现问题。你看咱们可以看一下子,你看举个例子啊,你看比如说老师来一个手机。手机通讯手机添加属性,比如说颜色,咱们先来一个颜色,来一个黄色。对不,那以及你看老师再来一个,再来个什么色呢。啊,你看老师给他点一下,比如再来个什么,再来个青色。那你会发现是有问题的,什么问题。就是一个信号量,就是一个属性,是没办法操作,控制着所有属性值的变化。所以说你放在哪,你放在这儿去定义是不行的。这块呢一定要想通,那老师呢也做一下笔记。那也就是说查看模式,哎,查看模式就说白了就是显示SPA。
18:03
对吧,以及编辑模式是显示显示音谱的。那你这块要注意,咱们呢,可以通过flag标记。哎,标记。哎,进行切换啊,切换查看模式与。编辑模式。但是要注意,但是需要注意的是。那么一个属性flag。那么没有办法控制着控制什么,控制着全部的属性值的切换。对不?你看如果你放在哪,你放在了这flag放在data,这就放了一个,你会发现大家要么都是编辑模式,要么都是啥,都是查看模式。而你看已经写好的那个。你看手机。手机通讯手机添加属性,比如说颜色。
19:00
老师呢,给他来一个黄色。对不?哎,完了以后再来,再来个什么,再来个青色,你会发现它们之间是相互不影响的。对不对,而咱们现在如果要这么写,你会发现大家来一起嗨。什么叫一起开,要么都是查看模式,要么都是编辑模式,所以说你这么搞他不行。但是你一定是需要通过一个销量去控制,到底谁显示谁隐藏,那这怎么办?那这个啊,其实也简单,怎么办呢?就是让每一个属性值去控制的当前是查看模式还是编辑模式。那也就是说你把flag你别放在这儿。别放哪,别放在这个date这因为放在这儿只有一个,你可以怎么办?就是当你每添加一个属性值的时候,你给他身上都加一个标题。让他自己让当前这个属性值控制了自己是查看模式还是编辑模式。
20:01
那什么时候,就是当你点击添加属性值这个按钮的时候。对不,那咱们找一下子添加属性值看这。那么现在添加属性看着啊添加属性值的毁掉,那现在呢,咱们只是往这个数组里面布置一个对象。那么这个对象其实就是一个属性值,那它现在只有两个字段,那咱们可以怎么办?可以这么办,你给每一个属性值都打一个flag,默认啥,默认是处。对不对,你看咱们呢,可以回到咱们这儿慢慢的去看一下数据。一号。你看。老师呢,给你们倒饬一下,咱们还是要盯住数据。比如说咱来一个颜色的属性。来老师呢,把它呢给它拽上看这。你就记住时时刻刻的盯住数据,数据才是真理,对吧,咱们呢,瞄一下子啊,看这老师,比如说添加一个属性值,添加一个。对吧,当然这块呢,咱们呢,这块呢,先给他干掉,因为咱们那个flag是不是干掉。
21:04
对吧,那咱这儿呢,先一下回到解放前,全部给他干掉。这块呢,先给他干掉。对吧,你看老师呢,先给你们操作一下子,你自己先看一下吧。哎,是不是删多了。这个老师给他倒退一下,看一下是不是删多了啊,V-if对吧,那V-else也得去掉。对吧,那咱们呢,看一下子,你看老师给你操作一下子找你。手机。手机通讯。手机对吧,添加属性,比如说颜色。你看,当老师每一次添加一个属性值的时候,你盯住了你看啊。啊,属性值在这呢,啊看走。来一个颜色。那你会发现这个属性值身上是不是有一个标记叫做flag控制,它显示云隐藏,你再点击再添加。这个属性值身上是不是也有相应的flag进行标记对吧,显示与隐藏。
22:03
对吧,因为说白了,每一个属性值控制着自己,谁是显示模式,就是查看模式还是编辑模式,你不能用一个属性去玩。对吧,那所以说呢,这块呢,咱们就这么办了啊,让每一个属性咱写一下子。而且要注意这个属性,咱们写一下吧,先说这个flag这个属性。Flag属性。就相当于给每一个属性值添加一个标记,叫做flag。用于切换切换啥切换查看模式与哎编辑模式。编辑模式,而且这样的好处是什么?好处是每一个属性值可以控制。自己的啊,模式切换。就不用大家一起,你全是查看模式,那全是查看模式那对吧,啊,就像最开始那种效果就可以,诶搞定了。
23:06
而且呢,还要注意一件事,什么事,那么当前的这个flag。当前的这个flag属性,它呢是一个响应式属性。R。响应是属性。对吧,什么叫想是属性,就是很简单数据变化。试图跟着丙。哎,试图跟着变化,为什么呢?因为咱们的这个数组啊,A e tr value list对吧,还有这个at tr eo,他们已经在date当中声明了,那么在date当中声明的数据啊,都是想是数据,而且这个数据是push进来。那咱们说过数组的检测可以通过替换和变更,对吧,而push是属于变更,那所以说这条数据是显示。VE底层可以检测到它对吧,数据变化,那试图跟着变,这是咱们前面基础说过的。
24:03
那所以说回到哪,回到这儿,回到咱这个结构这啊结构这。那这块呢,你就可以判断了,判断什么,判断咱们ver if到底是显示与隐藏,那就通过谁,通过每一个属性值的啥flag进行判断。对吧,那现在那这写V-if,那这块就该写啥V-else。而且呢,还有个小细活,V-if与V-else之间不允许出现任何的节点,否则失效。对吧,那咱们看那现在应该展示的是谁,展示的应该是音input,咱们可以看一下手机。对吧,手机通讯。哎,手机通讯以及手机点击添加属性,比如说颜色来添加属性值,那比如说咱给来,你看现在默认显示的是不是应该就是音input,比如说黄色,那么当你一本乐的时候,你应该失去焦点。对吧,应该切换为查看模式,就是显示SPA,那所以说啊,咱们呢,应该给它加一个火乐时间艾特。
25:05
乐,那么当你一乐的时候,咱们要切换为查看模式,那叫to look吧。Look查看模式那你要干什么?你是不是得把相应的肉传进来?对吧,你应该把当前这个属性值的flag提高,为啥是不是提高有1FALSE。那当然咱们现在没有这个回调,那所以说在底下这里咱们要写相应的回调。我走到这儿。那这块写一下是失去焦点的事件,那干什么是不是切换为查看模式,那说白了干什么是不是啊,展示SPA。对不,那咱们这呢就好搞了,那就是肉的flag为啥为false。对吧,那咱们呢,可以看一下。对吧,一定要测试手机。手机通讯啊,运营商都可以。添加属性,比如说来一个颜色。
26:00
对吧,什么色的,比如说来一个黄色。对吧,那当你一本乐的时候,你看是不是切换V8。那以及还有一个事件,哪个事件就是恩特事件?那enter事件触发的事件回调跟他不一样了,是不是at t?对吧,K。Up,但是要注意变成原生世界native.enter。那也是一样,它需要用哪个回药,是不是也是to look look look,那也需要传谁,是不是传相应的肉。那咱们呢,还是回首呢去测试一下O不OK?对吧,选择手机。手机通讯。哎,手机添加属性,比如说来一个颜色。对吧,当你添加属性值的时候,比如说来个黄色,当你摁回车它也OK。那以及当你点击黄色的时候,就点击span的是不是得切换,为啥是不是切换为咱们的那个编辑模式,那所以说给咱们的span也给他绑定一个单机事件。
27:02
当你一点击的时候,你无非把肉的这个flag变为啥,变为false就行了。对吧,那咱们呢,可以看一下子,一定要多测试。手机。手机通讯。手机对吧,比如说来一个颜色。比如说什么色呢?来一个黄色,当你一本乐的时候没问题,一点击的时候,但你要注意啊,这是个死弹,它不是一个块元素,没有独占一行,那你点击白色的地方,它是没有切换的,所以说呢,咱们给它转成块元素要大一些。对不I style为第一团累,为什么呢,为block。对吧,哎B,那你看当咱们一点击span的时候刷新。重新跑一下手机。手机通讯啊,手机添加,比如说来一个颜色,那么当你点击添加属性值的时候,你看黄色我按灰车是不是切换为死SPA,而且这个死SPA它个头变大了,但你一点击。
28:02
对吧,一点击。啊,看一下子,当你一点击的时候,肉的flag应该为啥应该为触啊,应该为触,应该显示那个音。对吧,保存一下,那看一下,当你一点击对吧,那咱重新跑一下刷新。手机。手机通讯手机。对吧,添加属性,比如说颜色。那以及添加属性值,比如说黄色,你看当老师一本没问题,一点击也没问题。而且多个属性值之间,比如说咱来个青色,它们是相互不影响的,你是你,我是我。那为什么呢?你看还是看数据,因为每一个属性值有属于自己的属性去控制的,到底是显示与隐藏,它两者互不相干。对不对。对吧,那所以说咱们完成了查看模式以及切换,呃,切换为编辑模式的进行切换。
29:03
啊,所以这个操作你得学会了。OK吧,那所以说这是咱们完成了所谓的呃,查看模式与编辑模式的切换。
我来说两句