計算屬性computed
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// this 指向 vm 實(shí)例 （這個為反轉(zhuǎn)）
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 。竹习。而計算內(nèi)的是可以立即返回結(jié)果的指孤。
總結(jié)，計算屬性可以定
// 計算屬性的 getter
reversedMessage:{
get:function () {
// this 指向 vm 實(shí)例
return this.organ.organName.split('').reverse().join('')
},
set:function (va) {
this.organ.organName = this.organ.organName + va;
}
}
vm.rereversedMessage= 'sss' 直接用猴抹。
偵聽器watch
js
watch: {
// 如果 `question` 發(fā)生改變带族，這個函數(shù)就會運(yùn)行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
<input v-model="question">
也可以用 API
vm.$watch( expOrFn, callback, [options] )
參數(shù)：
{string | Function} expOrFn
{Function | Object} callback
{Object} [options]
{boolean} deep
{boolean} immediate
返回值：{Function} unwatch
用法：
觀察 Vue 實(shí)例變化的一個表達(dá)式或計算屬性函數(shù)◇案回調(diào)函數(shù)得到的參數(shù)為新值和舊值蝙砌。表達(dá)式只接受監(jiān)督的鍵路徑。對于更復(fù)雜的表達(dá)式跋理，用一個函數(shù)取代择克。
// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做點(diǎn)什么
})
//新與舊
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從入門到進(jìn)階：過濾器filters（五）]
可以用于表單校驗(yàn)
<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] )
參數(shù)：
{string} id
{Function} [definition]
// 注冊
Vue.filter('my-filter', function (value) {
// 返回處理后的值
})
// getter薪介，返回已注冊的過濾器
var myFilter = Vue.filter('my-filter')
