- computed
- <div id="app">
- {{ message.split('').reverse().join('') }}
- </div>
计算属性的实例:
- <div id="app">
- <p>{{ message }}</p>
- <p>{{ reversedMessage }}</p>
- </div>
- <script>
- var vm = new vue({
- el: '#app',
- data: {
- message: 'dashu!'
- },
- computed: {
- reversedMessage: function () {
- return this.message.split('').reverse().join('')
- }
- }
- })
- </script>
- methods: {
- reversedMessage2: function () {
- return this.message.split('').reverse().join('')
- }
- }
- var vm = new Vue({
- el: '#app',
- data: {
- name: 'Google',
- url: 'http://www.google.com'
- },
- computed: {
- site: {
- // getter
- get: function () {
- return this.name + ' ' + this.url
- },
- // setter
- set: function (newValue) {
- var names = newValue.split(' ')
- this.name = names[0]
- this.url = names[names.length - 1]
- }
- }
- }
- })
computer 属性 "依赖缓存" 的概念
method 的概念
有缓存, 不会发生改变, 于是界面渲染就直接用这个值, 不再重复执行代码
没有缓存, 只要用一次, 函数代码就执行一次
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/47b1e404c6b5