计算属性computed
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// this 指向 vm 实例 （这个为反转）
return this.message.split('').reverse().join('')
}
}
})
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
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()
}
},
<input v-model="question">
也可以用 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（五）]
可以用于表单校验
<div id="app">
<input type="text" v-model="message" />
{{message | capitalize }}
</div>
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')
