可以在{{}}中编写合法的JavaScript表达式，但是对于复杂逻辑，存在代码难懂不易理解的缺点。
计算属性
通过在Vue实例的computed中使用函数计算属性，并将函数的返回值赋值给变量值
注意点:
虽然在定义计算属性的时候是通过一个函数返回的数据，但是在使用计算属性的时候不能在计算属性名称后面加上()， 因为它是一个属性不是一个函数(方法)。
<body>
<div id="app1">
<p>{{messRev}}</p>
</div>
<script>
let vue1 = new Vue({
el:"#app1",
data:{
message:'abcedfg'
},
computed:{
messRev:function () {
let res = this.message.split('').reverse().join('');
return res;
}
}
})
</script>
</body>
函数
通过函数也可以计算属性并将返回值赋值给变量值
函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值
计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值
计算属性适应于变量值不会频繁变化的场景
<body>
<div id="app1">
<p>通过计算属性：{{mess1()}}</p>
<p>通过函数：{{messRev}}</p>
</div>
<script>
let vue1 = new Vue({
el:"#app1",
data:{
message:'abcedfg'
},
methods:{
mess1(){
let res = this.message.split('').reverse().join('');
return res;
}
},
computed:{
messRev:function () {
let res = this.message.split('').reverse().join('');
return res;
}
}
})
</script>
</body>
过滤器
专门用来格式化插入的文本数据
只能在插值语法和v-bind中使用，并且可以连续使用
自定义全局过滤器
定义全局过滤器的格式：Vue.filter(“过滤器名称”, 过滤器处理函数)
使用格式：{{msg | 过滤器名称 | 过滤器名称}} 或者 :value=“msg | 过滤器名称”
<body>
<div id="app1">
<p>{{name | formartStr1 | formartStr2}}</p>
</div>
<script>
Vue.filter('formartStr1',function (value) {
//传递的参数value既是要处理的数据
value = value.replace(/学院/g,'大学');
return value;
});
Vue.filter('formartStr2',function (value) {
value = value.replace(/大学/g,'育儿园');
return value;
});
let vue1 = new Vue({
el:"#app1",
data:{
name: "知播渔学院, 指趣学院, 前端学院, 区块链学院"
}
})
</script>
</body>
自定义局部过滤器
给创建Vue实例时传递的对象添加
filters: {
// key: 过滤器名称
// value: 过滤器处理函数
‘formartStr’: function (value) {}
}
<body>
<div id="app2">
<p>{{name | formartStr}}</p>
</div>
<script>
Vue.filter('formartStr1',function (value) {
//传递的参数value既是要处理的数据
value = value.replace(/学院/g,'大学');
return value;
});
Vue.filter('formartStr2',function (value) {
value = value.replace(/大学/g,'育儿园');
return value;
});
let vue2 = new Vue({
el:"#app2",
data:{
name: "知播渔学院, 指趣学院, 前端学院, 区块链学院"
},
filters:{
'formartStr':function(value){
value = value.replace(/学院/g,'大学');
return value;
}
}
})
</script>
</body>
时间格式化
字符串的padstart方法能将小于指定位数的字符串补全
先使用 +’ ’ 将获取到的月日时分秒转换成字符串，再使用padstart方法，当某一个时间是个位数时，在前面补0。
<body>
<div id="app">
<p>{{time | timeFormat}}</p>
</div>
<script>
Vue.filter('timeFormat',function(value){
let date = new Date(value);
let year = date.getFullYear();
let month = date.getMonth() + 1 +'';
let day = date.getDate() +'';
let hour = date.getHours() +'';
let minute = date.getMinutes() +'';
let second = date.getSeconds() +'';
return `${year}-${month.padStart(2,'0')}-${day.padStart(2,'0')} ${hour.padStart(2,'0')}:${minute.padStart(2,'0')}:${second.padStart(2,'0')}`
})
let vue = new Vue({
el:'#app',
data:{
time:Date.now()
}
});
</script>
</body>
