宝哥软件园

使用vue计算属性获取和设置的示例

编辑:宝哥软件园 来源:互联网 时间:2021-08-27

本文说明了获取和设置vue计算属性的用法。分享给大家参考,如下:

计算属性是什么:vue文档中说模板中绑定了太多的逻辑,使得模板太重,难以维护。

换句话说,您可以设置自己的值(B值),它与数据(A值)下定义的值有某种关系。B的值是基于A的值,一些逻辑生成的值可以直接在模板中使用。当a的值改变时,b的值也改变。是计算默认值get in属性。那到底设置了什么?

b的值是基于a的变化而变化的,那么b的值被直接修改会怎么样呢?这将进入set方法。

一般规律:B的值总是取决于A的值的存在和变化,最终渲染的A为100,B为110

!doctype html lang=' en ' head metaharset=' utf-8 ' title vue计算属性get和set/title style/style script src=' http:https://cdn.bootcss.com/vue/2.4.4/vue . min . js '/script/head body div id=' app ' pa的值为:{{a}}/p pb为:{ { b } }/p button @ click=' change ' button/div script new vue({ El : ' # app ',data:{ a:1 },computedb=100 } } })/script/body/HTML在这里,使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun对上述代码进行测试,可以得到如下运行结果:

希望本文对vue.js程序的设计有所帮助。

更多资讯
游戏推荐
更多+