6 过滤器
2019-03-15 本文已影响0人
陶然然_niit
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
-
在双花括号中
{{ message | capitalize }} -
在
v-bind中
<div v-bind:id="rawId | formatId"></div>
过滤器实例——文本内容截取和日期时间格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js-过滤器练习-字符串的截取和时间格式的转换</title>
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>处理前</h3>
<h4>{{message}}</h4>
<h4>{{time}}</h4>
<hr>
<h3>处理后</h3>
<h4>{{message | handleMessage}}...</h4>
<h4>{{ time | formatDate }}</h4>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: '江苏省南京市仙林大学城羊山北路1号南京工业职业技术学院计算机与软件学院软件1721班',
time: new Date()
},
methods: {},
computed: {
handleMessage: function() {
return this.message.substring(0, 11);
}
},
filters: {
formatDate: function(date) {
var d = new Date(date);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
var hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours();
var minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes();
var seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : '' + d.getSeconds();
return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
},
handleMessage: function(msg) {
return msg.substring(0, 11);
}
}
})
</script>
</body>
</html>
运行结果
