无涯教程已经看到了Vue实例和组件的方法。计算属性(Computed Properties)类似于方法,但与方法相比有一些区别,将在本章中讨论。
通过一个例子来了解Computed计算属性。
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "computed_props"> FirstName : <input type = "text" v-model = "firstname" /> <br/><br/> LastName : <input type = "text" v-model = "lastname"/> <br/><br/> <h1>My name is {{firstname}} {{lastname}}</h1> <h1>Using computed method : {{getfullname}}</h1> </div> <script type = "text/javascript" src = "js/vue_computedprops.js"></script> </body> </html>
vue_computeprops.js
var vm = new Vue({ el: '#computed_props', data: { firstname :"", lastname :"", birthyear : "" }, computed :{ getfullname : function(){ return this.firstname +" "+ this.lastname; } } })
无涯教程正在调用计算方法getfullname,该方法返回输入的名字和姓氏。
computed :{ getfullname : function(){ return this.firstname +" "+ this.lastname; } }
当在文本框中键入内容时,如果更改属性firstname或lastname,则函数会返回相同的内容。
使用以下示例一起了解方法(method)和计算属性(computed)之间的区别。
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "computed_props"> <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1> <h1>Random No from method: {{getrandomno1()}}</h1> <h1>Random No from method : {{getrandomno1()}}</h1> <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1> <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1> <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1> <h1>Random No from method: {{getrandomno1()}}</h1> <h1>Random No from method: {{getrandomno1()}}</h1> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { name : "helloworld" }, methods: { getrandomno1 : function() { return Math.random(); } }, computed :{ getrandomno : function(){ return Math.random(); } } }); </script> </body> </html>
在上面的代码中,创建了一个名为 getrandomno1 的方法和一个带有函数 getrandomno 的计算属性,两者都使用Math.random()返回随机数。
它显示在浏览器中,如下所示。多次调用方法和计算属性以显示差异。
如果看一下上面的值将看到从计算属性返回的随机数保持不变,而与调用它的次数无关。这意味着每次调用时,所有的最后一个值都会更新。对于方法来说,它是一个函数,因此,每次调用它都会返回一个不同的值。
在本节中将通过一个示例来了解计算属性中的get/sest函数。
链接:https://www.learnfk.comhttps://www.learnfk.com/vuejs/vuejs-computed-properties.html
来源:LearnFk无涯教程网
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "computed_props"> <input type = "text" v-model = "fullname" /> <h1>{{firstName}}</h1> <h1>{{lastName}}</h1> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { firstName : "Terry", lastName : "Ben" }, methods: { }, computed :{ fullname : { get : function() { return this.firstName+" "+this.lastName; } } } }); </script> </body> </html>
定义了一个绑定到全名的输入框,该输入框是一个计算属性。它返回一个名为 get 的函数,该函数给出全名,即名字和姓氏。另外将名字和姓氏显示为-
<h1>{{firstName}}</h1> <h1>{{lastName}}</h1>
在浏览器中检查一下。
现在,如果在文本框中更改名称,将看到以下屏幕快照中显示的名称中未反映出相同的名称。
让无涯教程在全名计算属性中添加setter函数。
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "computed_props"> <input type = "text" v-model = "fullname" /> <h1>{{firstName}}</h1> <h1>{{lastName}}</h1> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { firstName : "Terry", lastName : "Ben" }, methods: { }, computed :{ fullname : { get : function() { return this.firstName+" "+this.lastName; }, set : function(name) { var fname = name.split(" "); this.firstName = fname[0]; this.lastName = fname[1] } } } }); </script> </body> </html>
在fullname全名计算属性中添加了set函数。
computed :{ fullname : { get : function() { return this.firstName+" "+this.lastName; }, set : function(name) { var fname = name.split(" "); this.firstName = fname[0]; this.lastName = fname[1] } } }
现在,当运行代码并编辑文本框时,相同的内容将显示在浏览器中。如果编辑了任何内容,get函数将返回名字和姓氏,而set函数将对其进行更新。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)