`
Vue.component('myLi',{
template:`
`
});
var App={
data(){
return{
price:0,
msg:'hello filter'
}
},
template:`
<div>
<input type='number' v-model='price' />
<h3>{{price | myCurrentcy}}</h3>
<h4>{{msg |myReverse }}</h4>
</div>
`,
filters:{
// 声明过滤器
myCurrentcy:function(value){
return "¥"+value
}
}
};
new Vue({
el:'#app',
components:{
App,
},
template:`<App/>`
})
`
优点:在项目中经常使用过滤器对数据进行格式化后显示在页面上,比如日期格式转化,数值转换成状态文字等过滤器,如果在每个.vue页面都复制同一个过滤器进行使用,虽然是没问题,但是如果过滤器方法中,需要追加新的情况判断或出现Bug时就要将每个.vue内的过滤器进行修改,既费时又费力,所以为了项目维护,可以优先考虑定义全局过滤器
Vue.filter('myReverse',function(value){
return value.split('').reverse().join('');
});`
vue提供了侦听属性watch,可以很好的观察和侦听vue实例响应数据的变化。
通过watch方法:方法里有(新值,旧值)用来监听 也可添加条件,当新值等于一个值时,输出其他值。*
<input type="text" v-model="msg">
<h3>{{msg}}</h3>
new Vue({
el:'#app',
data(){
return{
msg:'',
stus:[{name:'jack'}]
}
},
watch:{
msg:function(newV,oldV){
console.log(newV,oldV);
if(newV ==='sir'){
console.log('sir来了')
}
}
<button @click="stus[0].name='rose'">改变 </button>
<h4>{{stus[0].name}}</h4>
new Vue({
el:'#app',
data(){
return{
msg:'',
stus:[{name:'jack'}]
}
},
// 监听复杂数据类型 object array 深度监听
stus:{
deep:true,//深度监听
handler:function(newV,oldV){
console.log(newV[0].name);
}
}
}