5. 列表渲染指令与过滤器

作者: 叶小慈呀 | 来源:发表于2019-03-24 14:40 被阅读0次

5. 列表渲染指令与过滤器
angular2项目中html代码被安全过滤器筛掉的问题
3.Vue第三章
v-for,v-on,v-show,v-if
vue2(二)
# vue列表渲染/事件/表单/生命周期
Vue-指令
vue列表渲染
前端三大框架VUE,React, Angular对比
Vue Day2 之列表渲染

渲染指令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: '江苏省南京市仙林大学城羊山北路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>