<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 一种管道过滤器 将name传给toJack -->
{{num|toJack}}
<input type="text" v-model='num'>
<br>
{{word|reverseWord}}
</div>
<!--
过滤器
处理插值表达式
管道过滤器
处理模板中的数据
-->
<script>
// 全局过滤器
Vue.filter('toJack',function(e){
return e*899;
})
const vm = new Vue({
el: '#app',//vue指定挂载的区域 vue编译的范围
// m层
data: {//数据层 储存数据 相当于m层 数据模型 model
name: 'ycy',
num:100,
word:'娜塔莎波特曼'
},
// 局部过滤器
filters:{
reverseWord:function(e){
return e.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
最后
以上就是安静金鱼最近收集整理的关于vue 过滤器的使用 管道过滤器 局部和全局过滤器的全部内容,更多相关vue内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复