Vue 2.0入門シリーズ(2)リスト

名前の配列がある場合:

names: ["jack","rose","kaka","curry"]

Vueでどのように要素を表示して追加しますか?
v-for {{ }}およびv-text配列を出力するために使用される場合、配列全体が直接表示されます.したがって、配列を表示するにはv-forが必要です.

// html

    

        
 {{ name }}
    


// js
let data = {
    names: ["jack","rose","kaka","curry"]
};

var vm = new Vue({
    el: '#root',
    data:data
})

次に、配列に要素を追加することを考えます.効果は次のとおりです.
機能は簡単です.名前を追加し、入力ボックスを空にします.
jsで名前を追加
まず、jsで実現することを考慮します.

    

        
 {{ name }}
    
    
        



// js
let data = {
    names: ["jack","rose","kaka","curry"]
};

var vm = new Vue({
    el: '#root',
    data:data,
    mounted() { 
        document.querySelector('#submit').addEventListener('click',function(){

            let nameElement = document.querySelector('#addName'); //  
            vm.names.push(nameElement.value); //     
            nameElement.value = ''; //      
        })
    }
});

インスタンスがロードされると、mounted関数が実行されます.略記を使用します.

mounted:function(){
}

vueで名前を追加
次に、Vueを使用して同じ機能を実現します.

    
    
    
    


    

        
 {{ name }}
        
            
    

    

        let data = {
            names: ["jack","rose","kaka","curry"],
            newName: ""  //    input   ，    
        };

        var vm = new Vue({
            el: '#root',
            data:data,
            methods: {
                addName() {
                    vm.names.push(vm.newName);
                    vm.newName = "";
                }
            }
        });

    

ここでは,主にv-on命令が用いられているが,ユーザが追加ボタンをクリックするとaddName()方法がトリガーされる.v-onは、@と略記することもできる.

方法は、methodsのプロパティを入れる必要があります.これにより、vmでアクセスしてもよいし、命令式で使用してもよい.
付録:

本節ソースコード

リストレンダリング-Vue.js

Vue.js

Vue.js