Vue计算属性的使用
2017-02-17 09:43
651 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script src="../js/Vue.js"></script> <script src="../js/vue-resource.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:'#box', data: { a: 1, }, computed:{ b:function(){ return this.a+1; } } }); console.log(vm.a); } </script> </head> <body> <div id="box"> a => {{a}} <br> b => {{b}} </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script src="../js/Vue.js"></script> <script src="../js/vue-resource.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:'#box', data: { a: 1, }, computed:{ b:function(){ return this.a+1; } } }); document.onclick = function(){ vm.a = 101; } } </script> </head> <body> <div id="box"> a => {{a}} <br> b => {{b}} </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> < 4000 span class="hljs-tag"><title>计算属性</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script src="../js/Vue.js"></script> <script src="../js/vue-resource.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:'#box', data: { a: 1, }, computed:{ b:{ get:function(){ return this.a+2; }, set:function(val){ this.a=val; } } } }); document.onclick = function(){ vm.b = 10; } } </script> </head> <body> <div id="box"> a => {{a}} <br> b => {{b}} </div> </body> </html>
相关文章推荐
- Vue计算属性的使用
- vue中的计算属性的使用和vue实例的方法示例
- 详解Vue的computed(计算属性)使用实例之TodoList
- 关于vue的使用计算属性VS使用计算方法的问题
- vue计算属性及使用详解
- vue教程2-03 vue计算属性的使用 computed
- vue计算属性的使用和vue实例的方法
- 详解vue2.0监听属性的使用心得及搭配计算属性的使用
- vue-使用计算属性遇到的坑
- vue.js使用之计算属性与方法返回的差别
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- Vue - 在v-repeat中使用计算属性
- vue2.0+基础知识连载(13)--- 计算属性的使用
- Vue 计算属性
- .使用面向对象思想,输出员工信息并计算员工的工资。实现过程为:定义一个部门(Department)类,该类有部门编号(Id)、部门名称(Name)属性; 再定义一个员工(Employee)类,该类的属
- Vue计算属性
- vue.js计算属性setter
- KnockoutJS 3.X API 第三章 计算监控属性(1) 使用计算监控属性
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js教程之计算属性