业务需求:
- 用户输入数据后,使用过滤器将数据反转
使用场景:
- 对接收的数据进行格式化(数据/价格/时间)等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器的使用</title>
</head>
<body>
<div id="app">
<!-- 使用 | 线 调用过滤器-->
用户输入内容: <input type="text" v-model="username" /><br>
<!-- 显示用户输入的数据 -->
{{username}}<br>
<!-- 这种方式只显示处理过后的数据-->
{{username | rename}}<br>
<!-- 过滤器级联-->
{{username | rename | addChar}}
</div>
<script src="../js/vue.js"></script>
<script>
//1.单独定义过滤器
// Vue.filter === 过滤器
// 参数1: 过滤器名称 参数2: 过滤器执行的方法
// 注意事项: 过滤器需要返回值.
Vue.filter('rename',function(val){
return val.split('').reverse().join('')
})
//2.追加哈哈哈字符
//箭头函数写法 可以省略function关键字, 如果只有一个参数则()省略
//使用=>进行关联
Vue.filter('addChar',val => {
return val + '哈哈哈'
})
const app = new Vue({
el: "#app",
data: {
username: '',
},
methods: {
}
})
</script>
</body>
</html>
运行步骤:
- 添加一个
input
标签,设置v-model
属性 - 定义过滤器,定义方法返回值。
- 设置插值表达式 以
|
分割,调用过滤器。 - 在输入框中输入数据,随之将过滤好的数据进行实时的展现。