学习vue.js计算属性
网络编程 2021-07-04 19:19www.168986.cn编程入门
这篇文章主要和大家一起学习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会实时刷新数据 而puted会在第一次加载后会产生缓存--> <!-- 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' }, puted:{ //a puted 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', }, puted:{ fullname:function () { return this.firstName+' '+this.lastName } } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:js实现小窗口拖拽效果
下一篇:学习vue.js中class与style绑定
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程