00:01
我们再来说一下计算属性和真听器,来举一个场景的例子,假设呢,这是我们购物车,购物车里边呢有两项数据,一个是西游记,它的价格是多少,这是从数据库获取来的,包括数量呢,我们可以给它动态的增减,还有水浒传价格数量,而我们这个购物车的总价呢,是需要实时计算出来的,那我们就可以先利用一个叫计算属性来做这件事,来我们来写上这篇代码,我们先来拗一个为UEL,我们先来绑定元素,我们来绑定我们这个APP,然后我们在贝塔里边来写上我们的数据,那第一个数据我们这个价格,西游记的价格呢,假设我们准备了一个属性,就叫西游记price,好把它复制过来,西游记的价格呢,假设是99块,诶九毛八,然后呢,接下来还有我们这个水浒传的价格。你再来封装一个假设,水浒传我们呢,他的price是我们98块,比如98块整好,这是呢,我们这两个价格,而且这个数量呢,每一个也不一样,那我们都来绑定v model,这是西游记的数量,西游记的number和我们V-model,我在这个模态框里边来绑定了水浒传的这个number,他们呢都是一个数字类型的这个输入框,那我们把这两个值也复制进来,默认呢,我们西游记的数量是一个,然后呢,水浒传的数量呢,我们也是一个。
01:44
我们来看一下页面效果,现在页面效果呢,我们这是西游记的价格,以及水浒传的价格,我们可以在这儿动态来调整它的这个数量,这样呢,我们希望总价能动态的计算,我们呢可以这样来做,我们可以在VU里边,除了EL data里边,我们还有一个属性叫computed,这个呢代表计算属性,所有需要动态计算的,我们都可以写在这,比如呢,我们希望有一个总价,这个总价呢叫total price,这叫total price呢,我们来复制过来,那我们放在这,这叫total price啊,我们给把它声明成一个方法,诶通过这个方法呢,给它计算出来,当最快的这个方法声明呢,我们可以写成这样子,诶这是我们ES6的这些语法,好,那它真正的总价的值,我们就可以给它return出来,真正的总价是什么呢?我们可以获取这里边的值给它进行计算,This点,我们把西游记的价格拿来乘以西游记的数量。
02:45
我们西游记的number,然后呢,同时加上我们这个水浒传的价格,水浒传的这个价格乘以我们这个水浒传的这个number,好,这是我们写的这个计算属性,我们来保存一下,看一下页面效果,诶发现呢,这已经算出来了,包括我们在这动态调整来,那调整的时候呢,这一块也会有相应的价格更新,但是这个计算精度的问题呢,我们项目用到的时候再解决,我们现在呢,先不关心它。
03:17
而这个计算属性最大的特点就是它所依赖的这些值,只要有任何一个发生变化,都会触发它的重新计算。接下来呢,我们再来看一下这个监听器,那有时候呢,我们需要这么一个场景,比如西游记的库存现在只有三件,我们需要实时监听到我们这个数量的变化,它超过三件了,就来提示他我们库存已经超了,所以呢,我们可能有这个需求,那我们监听器就可以做,那监听器呢,是在比里边有一个呢叫watch,这个watch呢,我们可以来监控某一个属性,比如呢,我现在来监控西游记的这个数量,所以呢,我们想要监控谁就把它写在这,当然监控呢是一个方法,它可以呢,这个自动触发监控功能,只要这个数量发生变化,那这个方法呢,可以传入两个参数,比如前面的参数呢,就是我们此时变化的新址,而后边呢,其实就是我们以前的旧址,每次变化呢,都可以看到这个内容,比如我们来alert一下吧。
04:17
这呢有个new value,那就是我们这个值,包括呢,我们还有一个它的旧值O的value,我们都给它打印一下,我们都可以实时的观察到这个变化,我们来保存一下,来看一下页面,我在这动它的时候,诶new value是二,O的value是一,我们一现在还没变成二,我确定一下,诶这就变了,那再来每次都能观察的变化,我现在想要的效果呢,就是它的数量不能超三,超三了以后呢,比如给一个提示,我们就在这来写一个message,这个提示消息吧,默认呢提示消息没有什么东西,我们就给data里边是空的,所以我们在这来判断一下,如果我们传入的这个新址大于三,如果是大于三,那我们就来提示它,他已经啊超库存了,我们直接给message呢,给一个就是库存。
05:13
超出限制了,那我们呢,把它的库存就重新改为最大的三,我们比如西游记的数量我们最多呢,给它上成三,我们来保存一下,把这一块代码删掉,我们看一下效果,我在这呢进行加加加加加,我再要加呢,库存已经超出限制了,那我再要减的话呢,其实这个数量只要没超出限制,把这个消息呢要取掉,所以呢,我们else,只要你的这个数量不是大于三,我给你把这个消息呢就可以不要了,不要的话呢,我们直接就把这个消息呢给它置为空,那整个一连串的联动就是我们只要监听到这个西游记的数量变化,我们就会触发这一段逻辑,当然我们说的新式语法的写法呢,我们就可以不用写function了,我们声明方法,直接这么来保存一下,我来测试一下也是没问题的,走走走这块多了三个呢啊,它没有展示出。
06:14
库去,我们把这个改成大于等于三吧,要不然等于三又来到了else环节又是空的了,我们来保存一下,我们来走走走好,现在呢,只要超出三个,那就说库存超出限制最大为三,然后呢,否则的话呢,我们就没有这个提示消息,这是我们说的计算属性和侦听器,我们再来看一个它的这个过滤器,假设呢,还是我们这个场景们这有一个user list,我们要在ul里边展示出来,我们以前呢,可以使用v for v for呢,我要遍利的是user list,诶,我们每遍利的一个数据user in user list,我们想要在这展示呢,我就双大括号展示出以当前用户的他的ID包括来连接上,把其他的都加上用户的名字。
07:03
Name,还有我们当前正在便利用户的性别user点真的好,我来保存一下,看一下页面效果,现在呢都是遍历出来,但是现在性别呢,我们可能数据库存的都是一零,那一代表男,零代表女,那我们可以来这么做,那在这显示性别的时候,我来写一个三元运算,当我来判断它是一吗?如果是一呢,我们就来写一个男,否则呢,就来写一个女,来保存看一下页面效果,这是没问题的,但我们说这种三元运算啊,在复杂场景下呢,也有点不好用,比如我们这个要根据你的真的的值,要经过一系列的复杂运算才能决定出你显示成什么样子,那我们呢,就可以利用过滤器来做这个事儿,那过滤器怎么办呢?诶,我们在这儿view里边还能有一个属性叫filters,我们这叫过滤器,那我们来可以写上一个过滤器,比如我们就叫真的filter,哎,这个过滤器呢,其实是。
08:03
一个方法,这个方法呢,我们可以将过滤的值传进来,比如我们传了一个Y6值,这个Y6值最终展现成什么样,我们就在这来写逻辑,那我们就来写一下,我们其实呢,如果这个user真的使用了这个过滤器,那这个真的呢,其实就是一零两种条件,我们就来判断一下if,我们传过来的这个Y6等等一那呢,我们就给它写返回,诶一定要返回个东西,那我们才能使用它,好,这是男,Else呢,我们就来写返回,Return女,那这个过滤器怎么用呢?非常简单,我们可以不用这个三元运算了,我们呢,用成这样子,我还是来取出user真的,User点真的。然后呢,我写一个竖线,这是叫管道符,我用真的filter过滤一下,那下来呢,它就会把user真DA的值传给真的菲尔塔,然后呢,这个Y6,就是你当前的这个一或者零,我们通过判断,根据一呢,我给你返回的最终是一个男,我们这个表达式里有返回值就能显示出男,否则呢,显示出女来保存看一下效果是一样的,男女没问题,这样呢,就是我们说的过滤器,当然我们这个过滤器呢,写在我们当前唯有实例里边,我们把它称为局部过滤器,只能在我们这个实例,也就是我们管控的这个APP里边能用,那其他呢用不了,那我们也可以来写一个全局过滤器,那全局过滤器的写法呢,那也很简单,直接写一个我you点一个filter,我们叫不叫filters,好给当前filter呢起一个名字,比如我们还是以这个性别过滤吧,我们就叫g filter,然后呢,接下来我们过滤器呢,都会收。
09:53
一个前面传过来的值,所以呢,我们这写一个过滤器的功能是一个方法,它能接收一个传过来的值,那还是这段判断,我呢就直接复制来,那假设呢,我们这个过滤器返回到男女,那是这个样子的,区分一下auto shift f代码整理一下,那想要用这个全局过滤器,我们就可以在任何实例里边很方便的使用,我呢直接在这测试一下,还是我们这个user真的user点真的,然后呢,我们让它过滤一下,用我们这个g filter来进行过滤,来保存,看一下页面效果,诶发现呢,这一块也是没问题的。
我来说两句