1.定义计算属性(computed)
<body>
<div id="app">
<p>{{name}}</p>
<p>{{age + 10}}</p>
<p>{{msg.split("").reverse()}}</p>
<!-- 以上方式缺点：代码无提示，不方便 -->
<p>{{msgc}}</p>
</div>
</body>
<script>
let vue = new Vue({
el: "#app",
data:{
name: "yubaibai",
age: 110,
msg: "kunming"
},
//专门用于定义计算属性的
computed:{
msgc:function(){
return "abcdsfff".split("").reverse();
}
}
})
</script>
- 注意使用计算属性的时候不能在后面加（），因为他是一个属性，不是一个方法。
2.计算属性和函数的区别？
<body>
<div id="app">
<p>{{msgc}}</p>
<p>{{msgc}}</p>
<p>{{msgc}}</p>
<p>{{getMessage()}}</p>
<p>{{getMessage()}}</p>
<p>{{getMessage()}}</p>
</div>
</body>
<script>
let vue = new Vue({
el: "#app",
data:{
name: "yubaibai",
age: 110,
msg: "kunming"
},
methods:{
getMessage(){
//函数调用每次都会执行
console.log("函数执行次数");
return "alibaba".split("").reverse();
}
},
//专门用于定义计算属性的
computed:{
msgc:function(){
//只要返回的结果没有发生变化，那么计算属性指挥执行一次
console.log("计算属性执行次数");
return "abcdsfff".split("").reverse();
}
}
})
</script>
应用场景：由于计算属性会将返回的结果缓存起来，所以如果返回的数据不经常发生变化，那么使用计算属性的性能要比使用函数的性能高。
2.过滤器
用于格式化文本内容
- 全局过滤器
<!-- vue会把courseName交给过滤器处理之后再把结果插入到元素中 -->
<p>{{courseName | formatString}}</p>
<script>
/*
参数一：过滤器名称
参数二：处理数据函数
注意点：默认情况下处理数据的函数接受一个参数，就是当前要被处理的数据
*/
Vue.filter('formatString',function(value){
return value = value.replace(/课程/g,'学科');
})
let vue = new Vue({
el: "#app",
data:{
name: "yubaibai",
age: 110,
msg: "kunming",
courseName:"物理课程 化学课程 生物课程 语文课程 英语课程 地理课程 政治课程"
},
})
- 局部过滤器
<!-- vue会把courseName交给过滤器处理之后再把结果插入到元素中 -->
<p>{{courseName | formatString2}}</p>
<script>
let vue = new Vue({
el: "#app",
data:{
name: "yubaibai",
age: 110,
msg: "kunming",
courseName:"物理课程 化学课程 生物课程 语文课程 英语课程 地理课程 政治课程"
},
//专门用于定义局部过滤器
filters:{
"formatString2":function(value){
return value = value.replace(/学科/g,'过滤器2');
}
},
})
</script>
应用：时间格式化
//时间格式化
Vue.filter('timeFormat',function(value,formString){
let date = new Date(value);
let year = date.getFullYear();
let month = date.getMonth() + 1 + "";
let day = date.getDate() + "";
let hour = date.getHours() + "";
let min = date.getMinutes() + "";
let second = date.getSeconds() + "";
if (formString && formString === "yyyy-MM-dd") {
return `${year}-${month.padStart(2,'0')}-${day.padStart(2,'0')}`;
}
return `${year}-${month.padStart(2,'0')}-${day.padStart(2,'0')} ${hour.padStart(2,'0')}-${min.padStart(2,'0')}-${second.padStart(2,'0')}`;
})
