（5）过滤器
过滤器只能用在v-bind或者插值表达式中
<body>
<div id="app">
<p>{{timerformatter(birth)}}</p>
<!-- birth作为参数传进tool函数，显示返回值 -->
<!-- data数据源改变，过滤器方法也会重写 -->
<p>{{birth|tool}}</p>
<!-- tool过滤的结果再传给tool2来过滤 -->
<p>{{birth|tool|tool2}}</p>
<!-- a,births是前面的参数 -->
<p>{{a,birth|tool3(100)}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
a:1,
birth : "1997-02-03"
},
methods: {
timerformatter(str){
let age = new Date().getFullYear()-new Date(str).getFullYear()
console.log(age);
return age + "岁"
}
},
filters:{
tool(str){
let age = new Date().getFullYear() - new Date(str).getFullYear()
return age + "岁"
},
tool2(str){
console.log(str);
if(parseInt(str) > 18){
return "可以喝酒"
}
else{
return "未成年不可以喝酒"
}
},
tool3(a,str,or){
console.log(a,str,or);
}
}
})
</script>
</body>
（6）计算属性
//计算属性使用时当做属性使用
//计算属性设计时当做函数设计(就像es6中的属性)
- 计算属性会把使用到的data中的属性 缓存 起来，防止页面发生大量重复计算，
- 提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性，否则直接使用缓存的数据
2.如果是修改了data中监听的某个属性值内部的数据,计算属性就不会重新运行
比如:计算属性使用的是data中的一个数组,某个交互把数组内部的某个下标的值改了,但是这个数组没有改变,就不会触发计算属性
3.解决2的办法1:把修改后的数组重新赋值给data,让引用发生变化,来触发计算属性
3.解决2的办法2:赋值 JSON.parse(JSON.stringfy(data))
- methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍
- 方法常常是作用的事件使用,计算属性常常是动态计算结果时使用
缺点:如果简单的运算也用计算属性 反而会增加资源消耗(计算属性会去监听计算的值 而且会缓存计算的结果 ) 比如生日转年龄时 可以用过滤器
<body>
<div id="app">
<h1>{{birth}}</h1>
<h1>{{msg}}</h1>
<p>methods-----{{age(birth)}}</p>
<p>computed------{{agecom}}</p>
<p>x----{{x}}</p>
<button @click="change">change</button>
</div>
<script>
new Vue({
el:"#app",
data:{
a:1,
birth : "1990-02-03",
msg:"hello"
},
methods: {
age(str){
let age = new Date().getFullYear() - new Date(str).getFullYear()
return age + "岁"
},
change(){
this.birth="1997-02-03",//计算属性会重写
this.msg = '1'
this.x=40 //x计算属性set方法调用。改变了this.birth
}
},
filters:{
},
computed:{
// 监听计算属性使用的数据源是否改变，改变才重写计算属性
agecom(){
let age = new Date().getFullYear() - new Date(this.birth).getFullYear()
return age + "岁"
},
x:{
get(){ //x取值时调用
console.log(this,11111)
return new Date().getFullYear()- new Date(this.birth).getFullYear()+"岁"
},
set(v){ //x可在方法中改变时
console.log(v)
this.birth=`${2022-v}-02-03`
}
}
}
})
</script>
</body>
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
