vue计算属性和侦听属性
2018-07-12 12:58
183 查看
计算属性和侦听属性
计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }} </div>这个表达式的功能是将message字符串进行反转,这种带有复杂逻辑的表达式,我们可以使用计算属性
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> ...... var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })
侦听属性
侦听属性的作用是侦听某属性值的变化,从而做相应的操作,侦听属性是一个对象,它的键是要监听的对象或者变量,值一般是函数,当你侦听的元素发生变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。window.onload = function(){ var vm = new Vue({ el:'#app', data:{ iNum:1 }, watch:{ iNum:function(newval,oldval){ console.log(newval + ' | ' + oldval) } }, methods:{ fnAdd:function(){ this.iNum += 1; } } }); }阅读更多
相关文章推荐
- Vue学习日志:计算属性(4)
- Vue------第二天(计算属性、侦听器、绑定Class、绑定Style)
- Vue——计算属性
- vue计算属性和事件监听
- Vue.2.0.5-计算属性
- Vue.js计算属性
- vue 学习笔记 part-5 ->计算属性
- Vue之路之--计算属性
- Vue基础(计算属性和观察者)
- vue 计算属性 --setter应用小实例
- vue 三元表达式class、图片切换 (涉及计算属性)
- vue计算属性
- Vue入门 - 计算属性与watchers
- VUE-cli全局变量,路由跳转引起计算属性函数的执行
- vue计算属性及使用详解
- 计算属性 vue
- Vue的计算属性
- Vue.js-05:第五章 - 计算属性与监听器
- Vue基础篇-计算&监听属性
- Vue小知识4.Vue中的计算属性