vue计算属性简单讲解
计算属性都以函数的形式写在 Vue 实例内的 computed 选项内&＃xff0c;最终返回计算后的结果。一个计算属性里可以完成各种复杂的逻辑&＃xff0c;包括运算、函数调用等&＃xff0c;只要最终返回一个结 果就可以。
例子&＃xff1a;
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Documenttitle>
head>
<body><div id&＃61;"app">{{updateText}}div><script src&＃61;"vue.js">script><script>var app &＃61; new Vue({el:&＃39;#app&＃39;,data:{text:&＃39;123,abc&＃39;},computed:{updateText:function(){return this.text.split(&＃39;,&＃39;).reverse();}}})script>
body>
html>
1.计算属性getter和setter属性
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Documenttitle>
head>
<body><div id&＃61;"app">{{fullName}}div><script src&＃61;"vue.js">script><script>var app &＃61; new Vue({el:&＃39;#app&＃39;,data:{firstName:&＃39;jack&＃39;,lastName:&＃39;rose&＃39;},computed:{fullName : {get:function(){return this.firstName &＃43; &＃39; &＃39; &＃43; this.lastName;},set:function(newNames){var names &＃61; newNames.split(&＃39; &＃39;);this.firstName &＃61; names[0] &＃43;&＃39; haha &＃39;;this.lastName &＃61; names[1];}}}})this.app.fullName &＃61;&＃39;John Doe&＃39;script>
body>
html>
2. 计算属性不仅可以依赖当前 Vue 实例的数据&＃xff0c;还可以依赖其他实例的数据
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Documenttitle>
head>
<body>{{updateName}}
div>{{updateName}}div><script src&＃61;"vue.js">script><script>var app1 &＃61; new Vue({el:"#app1",data:{text:&＃39;123,abc&＃39;}})var app2 &＃61; new Vue({el:&＃39;#app2&＃39;,computed:{updateName:function(){return app1.text.split(&＃39;,&＃39;).reverse().join(&＃39;,&＃39;);}}})script>
body>
html>
京公网安备 11010802041100号