计算属性computed

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// this 指向 vm 实例（这个为反转）
return this.message.split('').reverse().join('')
}
}
})

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

vm.reversedMessage 的值始终取决于 vm.message 。。而计算内的是可以立即返回结果的。

总结，计算属性可以定

// 计算属性的 getter
reversedMessage:{
get:function () {
// this 指向 vm 实例
return this.organ.organName.split('').reverse().join('')
},
set:function (va) {
this.organ.organName = this.organ.organName + va;
}
}
vm.rereversedMessage= 'sss' 直接用。

侦听器watch

js
 watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },

也可以用 API
vm.$watch( expOrFn, callback, [options] )
参数：
{string | Function} expOrFn
{Function | Object} callback
{Object} [options]

{boolean} deep
{boolean} immediate
返回值：{Function} unwatch
用法：
观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做点什么
})
//新与旧

var unwatch =vm.$watch(
function () {
return this.organ.organName +"232:"+ this.organ.organName
},
function (newVal, oldVal) {
console.log(newVal,oldVal);
}
)
//不使用
unwatch();

样式与style绑定

:class :style
简单使用可随时百度。

[vue从入门到进阶：过滤器filters（五）]

可以用于表单校验

var vm=new Vue({
el:"#app",
data:{
message:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})

全局定义过滤器

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})

方法

Vue.filter()
语法：Vue.filter( id, [definition] )
参数：

{string} id
{Function} [definition]
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

三、vue从入门到进阶：计算属性computed与侦听器watch（三）