1. 过滤器基本使用
过滤器在日常生活中也是比较常见的,例如自来水的过滤等。
在Vue
中,过滤器的作用就是格式化数据,也就是对数据的过滤处理,比如将字符串格式化为首字母大写
或者将日期格式化为指定的格式等。
下面先看一下自定义过滤器的语法
Vue.filter('过滤器名称',function(value){
//value参数表示要处理的数据
//过滤器业务逻辑,最终将处理后的数据进行返回
})
定义好以后可以使用。使用的方式如下:
<div>{
{msg|upper}}</div>
<div>{
{msg|upper|lower}}</div>
具体的程序如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>过滤器基本使用</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
<div>
<!--使用过滤器-->
{
{msg|upper}}
</div>
</div>
<script src="vue.js"></script>
<script>
//定义过滤器,让输入的单词首字母变成大写.
Vue.filter("upper", function (value) {
//获取首字母让其转换成大写,然后拼接后面的内容。
return value.charAt(0).toUpperCase() + value.slice(0);
});
const vm = new Vue({
el: "#app",
data: {
msg: "",
},
});
</script>
</body>
</html>