Vue.js过滤器示例
本文介绍了一个Vue.js中过滤器使用的示例，演示了如何创建一个简单的输入框，并通过自定义过滤器来修改显示的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
</head>
<body>
<div id="app">
<input type="" name="" v-model="name">
<p>{{name | addName}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
name:"123"
},
filters: {
addName(val) {
return "My name is"+val;
}
}
})
</script>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
</head>
<body>
<div id="app">
<input type="" name="" v-model="name">
<p>{{name | addName}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
name:"123"
},
filters: {
addName(val) {
return "My name is"+val;
}
}
})
</script>
</body>
</html>
其中可以使用如下
Vue.filter('double',function(value){ return value<10? '0'+value : value})
注册全局过滤器
扫一扫
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
