渲染指令v-for
当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for。它的表达式需结合in来使用，类似item in items的形式
- 实例
<div id="app"
<ul>
<li v-for="book in books">{{book.name}}</li>
</ur>
</div>
<script>
var app=new Vue({
el:'#app'，
data:{
books:[
{name:'《Vue.js实战》' },
{name:'《JavaScript语言》' },
{name:'《软件测试》' }
]
}
})
</script>
除了数组外，对象的属性也是可以遍历的
过滤器
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: '计算机与软件学院软件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>
