(Vue -03)Vue绑定样式 + 计算属性 + 侦听器+ 过滤器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了(Vue -03)Vue绑定样式 + 计算属性 + 侦听器+ 过滤器相关的知识,希望对你有一定的参考价值。

参考技术A

Vue官方文档
首页-学习下拉栏-文档-教程 =>火速一键进入学习

(1) 绑定一个对象,对象的属性名是类选择器名称,属性值返回 true ,表示添加该选择器

绑定的对象的,属性名 bgColor 是 css 里的 类选择器的名字
属性值 bgColor 是 数据里设置的属性名 ┗|`O′|┛ 嗷~~
初始化设定了是 false ,然后点击的时候呢给它变成 true ,添加成功啦

(2) 绑定一个三元表达式
三元表达式语法结构: 条件表达式 ? 表达式1 : 表达式2
如果条件表达式结果为 true ,则返回 表达式1 ;如果为 false ,则返回 表达式2 的值。

绑定的三元表达式条件为true时,添加选择器;条件为false则不添加。

:style 绑定样式时,对象的属性名称是原生CSS的属性名严格名称(要使用小驼峰命名法),属性值是具体的样式值,要采用小驼峰命名规范。

Vue官方的-计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。
所以,对于任何复杂逻辑,你都应当使用 计算属性

好耶~让我们开始吧┗|`O′|┛ 嗷~~

此时页面效果为:

姓名栏 中的 value 值会随着 姓栏 和 名栏 的输入而改变,但是需要在 姓名栏 中拼接。
有两种办法可以解决:

通过这个方法返回 this.firstName+ \'.\'+ this.lastName ,然后再去调用这个方法。如下:

结果是由两个属性拼接而来,说明 结果是由这两个属性计算而来。

在data同级,加一个 computed 选项,用于定义计算属性,里面定义的是方法;计算属性本质上是方法,在模板中当成属性去使用。如下:

此时把 :value 改成 v-model ,并不能实现双向绑定,且会报错。

注意: 计算属性默认情况下只能读,不能改。
如果想要让计算属性既能读,又能改,那就要换一种形式啦~

① 在 computed 里定义完整结构的计算属性,然后使用v-model进行绑定计算属性。
② get方法,用于返回计算属性的值。
③ set方法,用于修改计算属性的值,记得传值。

如下:

计算属性的优势是: 有缓存 。 当页面数据发生变化时,所有的方法都要重新执行。当计算属性用到的数据发生变化时,计算属性才会执行。

比如计算商品总价时,最好是用计算属性,它有缓存嘛

根据属性的名称,定义一个方法,用于侦听该属性的变化。
当属性的值发生变化时,该方法就会执行。

这个方法,有两个参数,第一个参数是最新值,第二参数是旧值。

如果要实现深度侦听对象的变化(也就是对象具体属性的变化),就需要使用完整的写法,定义一个对象。

deep 属性开启深度监视,值为 true 或 false
immediate 属性设定页面加载完成时,先运行一次,值为 true 或 false
              (注意:这种情况下,旧值是 undefined )
handler 定义监视的函数

注意:开启深度监视后,旧值已经没有意义,因为对象是引用类型,对象的属性值已经改了,就没有旧的属性值。

当前计算属性里面用到数据发生变化时,会重新执行计算属性,
只是计算属性必须要在模板中使用(方法要在页面中用一下)

Vue官方的-过滤器
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 javascript 表达式的尾部, 由“管道”符号 | 指示。

局部过滤器(Vue实例内部定义的过滤器),只有当前Vue实例可以访问。
在 filters 中定义过滤器。
通过 管道符 | 调用过滤器,其实就是调用那个方法,将值传进去,再返回新的值。
过滤器可以 链式调用 ,就是之前已经过滤完成的结果,继续传给下一个过滤器,注意顺序。

在创建 Vue 实例之前定义的全局过滤器,所有的Vue实例都可以访问。
如果局部过滤器和全局过滤器冲突,优先级更高的是局部过滤器。
一般将全局过滤器,会单独创建一个filter文件夹存放┗|`O′|┛ 嗷~~,
记得在html文件里引入。

以上是关于(Vue -03)Vue绑定样式 + 计算属性 + 侦听器+ 过滤器的主要内容,如果未能解决你的问题,请参考以下文章

计算属性和侦听器

gis属性表没有area如何计算面积

KnockoutJS 3.X API 第三章 计算监控属性 可赋值的计算监控属性

Swift-存储属性,计算属性,类属性

《从零开始学Swift》学习笔记(Day 32)——计算属性

KnockoutJS 3.X API 第三章 计算监控属性 参考手册