computed计算属性不能传参，他只能监听预先在data中设置好的值，但是可以变相传参
<template>
<div>
<div id="example">
<input v-model="helloworld"/>
<p>{{ hello }}</p>
<p>{{ world }}</p>
<p>{{ helloworld }}</p>
<button @click="changedata">事件触发</button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
hello: 'hello',
world: 'world'
}
},
computed: { // getter，setter计算属性都有
helloworld: {
// getter
get: function () {
console.log('getter called')
return this.hello + this.world
},
// setter
set: function (newValue) {
console.log('setter called , newValue: ' + newValue)
this.hello = newValue
}
}
},
methods: {
changedata () {
//this.hello = 'hello~+++' //并不能触发set
this.helloworld = 'hello~world!'
}
}
}
</script>
filter的使用(全局和私有）若有冲突，私有先行
<template>
<div>
<div id="example">
<input v-model="helloworld"/>
<p>{{ hello }}</p>
<p>{{ world }}</p>
<p>{{ helloworld }}</p>
<button @click="changedata">事件触发</button>
<p>{{ filters_name | addprename }}</p> //对与filiter_name进行filiter过滤
</div>
</div>
</template>
<script>
import Vue from 'vue'
//方法一，定义全局filiter
Vue.filter('addprename' , function (data){
return data+'knox'
})
export default {
data () {
return {
hello: 'hello',
world: 'world',
filters_name: 'noe'
}
},
computed: { // getter，setter计算属性都有
helloworld: {
// getter
get: function () {
console.log('getter called')
return this.hello + this.world
},
// setter
set: function (newValue) {
console.log('setter called , newValue: ' + newValue)
this.hello = newValue
}
}
},
//方法二
filters:{
addprename(data){
console.log(data)
return data+'knox'
}
},
methods: {
changedata () {
//this.hello = 'hello~' //并不能触发set
this.helloworld = 'hello~world!'
}
}
}
</script>
