学习vue.js计算属性
更新时间:2016年12月03日 09:32:48 作者:1owrie
这篇文章主要和大家一起学习vue.js的计算属性,分享一些计算属性练习代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
关于vue.js的计算属性练习代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs计算属性</title> </head> <body> <!-- 字母反转方式一:不推荐 --> <div id="app-1"> {{ message.split('').reverse().join('') }} </div> <!-- 字母反转方式二 --> <div id="app-2"> {{ message2 }} <!-- 注意{}内的内容如果是方法要加() --> <p>反转后的内容{{ reverseMessage2() }}</p> </div> <!-- 字母反转方式三 此方法在括号中没有方法()--> <div id="app-3"> <p>原始{{message3}}</p> <p>反转后{{ reverseMessage3 }}</p> </div> <!-- 方法二和方法三的区别在于methods会实时刷新数据 而computed会在第一次加载后会产生缓存--> <!-- Vue.js 提供了一个方法 $watch ,它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时, $watch 很诱人 —— 特别是如果你来自 AngularJS 。不过,通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。 --> <div id="app-4"> {{fullName}} </div> <!-- 另一种实现方式--> <div id="app-5"> {{ fullname }} </div> <!-- 计算属性可以满足需求而且书写简便 为什么需要watch? 来响应数据的变化。当你想要在数据变化响应时,执行异步操作或昂贵操作时,这是很有用的。 --> <script src="js/vue.js"></script> <script src="js/vuetext.js"></script> </body> </html>
Js文件
var app1=new Vue({ el: '#app-1', data: { message: 'Hello Ke' }, }) var app2=new Vue({ el:'#app-2', data:{ message2:'Hello Hou Hou' }, methods: { reverseMessage2: function () { return this.message2.split('').reverse().join('') } } }); var app3=new Vue({ el:'#app-3', data:{ message3:'Zhou Er Ke' }, computed:{ //a computed getter reverseMessage3:function () { return this.message3.split('').reverse().join('') } } }); var app4 = new Vue({ el: '#app-4', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }); var app5=new Vue({ el:'#app-5', data:{ firstName: 'Foo', lastName: 'Bar', }, computed:{ fullname:function () { return this.firstName+' '+this.lastName } } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vue-cli npm如何解决vue项目中缺失core-js的问题
这篇文章主要介绍了vue-cli npm如何解决vue项目中缺失core-js的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08vue3中v-for报错'item'is of type'unknown'的
在写vue3+ts的项目,得到一个数组,需要循环展示,使用v-for循环,写完之后发现有个报错,接下来通过本文给大家介绍vue3中v-for报错 ‘item‘ is of type ‘unknown‘的解决方法,感兴趣的朋友一起看看吧2023-11-11
最新评论