本文介绍了一个Vue.js应用中的自定义过滤器示例，展示了如何使用过滤器来反转字符串和转换为大写。通过简单的代码实现，帮助读者理解Vue过滤器的工作原理。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>7过滤器</title>
<link href="css/special.css" rel="stylesheet" />
<script src="js/Vue-1.0.11.js"></script>
</head>
<body>
<div id="app" class="pc-content span5" style="padding-top:100px;">
<h3>7过滤器</h3>
<p>{{message}}</p>
<p>{{'大写：' + message | uppercase}}</p>
<p>{{message + '：序反' | reverse | uppercase }}</p>
</div>
<script>
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
new Vue({
el: '#app',
data: {
message: 'www.baidu.com'
}
})
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>7过滤器</title>
<link href="css/special.css" rel="stylesheet" />
<script src="js/Vue-1.0.11.js"></script>
</head>
<body>
<div id="app" class="pc-content span5" style="padding-top:100px;">
<h3>7过滤器</h3>
<p>{{message}}</p>
<p>{{'大写：' + message | uppercase}}</p>
<p>{{message + '：序反' | reverse | uppercase }}</p>
</div>
<script>
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
new Vue({
el: '#app',
data: {
message: 'www.baidu.com'
}
})
</script>
</body>
</html>
扫一扫
1835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
