과장 하 다

렌 더 링 명령 v - for
하나의 배열 을 옮 겨 다 니 거나 대상 을 반복 적 으로 표시 해 야 할 때 목록 렌 더 링 명령 v - for 를 사용 합 니 다.그것 의 표현 식 은 in 과 결합 하여 사용 해 야 합 니 다. item in items 와 유사 한 형식 입 니 다.

실례

    
{{book.name}}



      var app=new Vue({ 
       el:'#app'，
       data:{
           books:[
                 {name:'《Vue.js  》' },
                 {name:'《JavaScript  》' },
                 {name:'《    》' }
            ]
        }
    })

배열 을 제외 하고 대상 의 속성 도 옮 겨 다 닐 수 있다.
필터
Vue. js 는 일반적인 텍스트 포맷 에 사용 할 필 터 를 사용자 정의 할 수 있 습 니 다.필 터 는 두 곳 에 사용 할 수 있 습 니 다. 쌍 괄호 삽입 값 과 v - bind 표현 식 (후 자 는 2.1.0 + 부터 지원 합 니 다).필 터 는 JavaScript 표현 식 의 끝 에 추가 되 어야 합 니 다. "파이프" 기호 로 표시 합 니 다.

쌍 괄호 안에 {{message | capitalize}

v - bind 에서

인 스 턴 스 - 텍스트 내용 캡 처 와 날짜 시간 포맷

    
        
        
        
        
    
    
        

            
   
            
{{message}}
            
{{time}}
            

            
   
            
{{message | handleMessage}}...
            
{{ time | formatDate }}
        
        
            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);
                    }
                }
            })