用户登录

在 Vue 组件里可以定义一些计算属性,这些东西也是可以在组件里使用的数据,在这种计算属性里面会依赖组件里的一些其它的数据,当这些被依赖的数据发生变化的时候,这些计算属性也会重新计算出新的值。

在用 Options API 创建的组件里,添加这些计算属性可以在组件里添加一个 computed ,然后在它里面定义组件需要的计算属性。

使用 Composition API 创建的组件,要定义计算属性可以这样,先在 vue 里面,导入 computed 这个方法。 然后在组件的 setup 里面,定义一个计算属性。比如添加一个 nameEmoji ,它的值可以用一下 computed 这个方法,提供一个回调参数,这个回调返回的东西就是这个计算属性的值。

在这个计算属性里返回一个字符模板,里面先加上 name 的 value 属性的值,然后在后面再添加一个 Emoji 表情符号。

这个 name 是之前我们在这个 setup 里定义的一个数据。 让这个 setup 再提供一下这个 nameEmoji 数据。 然后在组件的模板里,可以绑定输出 nameEmoji 这个计算属性的值。

再回到浏览器,现在这里显示的就是 nameEmoji 这个计算属性的值,点一下这个标题,会修改组件里的 name 这个数据的值,因为 nameEmoji 里面用到了 name 这个数据,所以当 name 的值发生变化的时候,nameEmoji 也会重新被计算出新的值。

组合式接口:计算属性(computed)《 Vue.js 前端应用 #8: 反应系统 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点