16_过滤器（filter）
2018-02-08 本文已影响0人
CHENPEIHUANG
1）过滤器可以直接在计算属性中使用，不收区域影响
2）计算属性本质上是依赖watcher,只要对应的watcher被调用，则该计算属性的方法就会重新调用一次
3）计算属性不能反向修改原始数据，而且计算属性中不能有异步操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"/>
<p>{{msg|upperCase}}</p>
<p>{{upperMsg}}</p>
<p v-bind="msg"></p>
</div>
<script src="js/vue.js"></script>
<script>
var vm= new Vue({
el:"#app",
data:{
msg:"hello"
},
//定义过滤器
filters:{
upperCase(val){
//参数是待处理的数据
return val.toUpperCase();
}
},
//过滤器可以直接在计算属性中使用，不收区域影响
//计算属性本质上是依赖watcher,只要对应的watcher被调用，则该计算属性的方法就会重新调用一次
//计算属性不能反向修改原始数据，而且计算属性中不能有异步操作
computed:{
upperMsg(){
return this.msg.toUpperCase()
}
}
})
</script>
</body>
</html>
