Vue基础3

QQ截图20180525223327.png

截图的显示顺序就是代码的顺序；
html页面：

    
    
    
    
    


    

        {{ name }}
    
    v-if标签是判断的意思
    

        
现在你看到我了
    
    v-for 指令可以绑定数组的数据来渲染一个项目列表
    

        

            

            {{ todo.text }}
            
        
    
    v-on 指令添加一个事件监听器
    

        
{{ message }}
        逆转消息
    
    v-model能轻松实现表单输入和应用状态之间的双向绑定
    

        
{{ message }}
        
    
    
    

js代码:

var top = new Vue({
    el:'#vue-top',
    data:{
        name:"Taoyongpan"
    }
})
var app1 = new Vue({
    el:'#app-1',
    data:{
        seen:true
    }
})
var app2 = new Vue({
    el:'#app-2',
    data:{
        todos:[
            {text:'数组测试'},
            {text:'数组测试'},
            {text:'数组测试'}
        ]
    }
})
var app3 = new Vue({
    el:'#app-3',
    data:{
        message:'Hello World!'
    },
    methods:{
        reverseMessage : function(){
            this.message = this.message.split(' ').reverse().join(' ')
        }
    }
})
var app4 = new Vue({
    el:'#app-4',
    data:{
        message:"Hello Vue"
    }
});