Vue数据交互

1.静态数据绑定

    
btn1
    
btn2
    
btn3
    
 btn4


    
text1
    
text2
    
text3
    
text4
    
    

对想要操纵的元素绑定方法传参，在实例中将对应数据进行重新绑定，在HTML中通过获取属性进行渲染

2.模拟数据绑定

2.1数组绑定

   

       
{{item}}{{i}}
   

       
{{item}}---{{n}}
   

2.2数组对象绑定

    

        

            
{{item.btn}}{{i}}
        
        

        
{{item.text}}---{{n}}
        
    

3.用axios获取动态数据进行绑定

getData: function () {
                    const that = this;
                    axios({
                        method: 'get', //请求方式
                        url: 'http://localhost:5050/data' //接口
                    }).then(function (res) {
                        if (res.status == '200') {
                            that.item = res.data //将获取的数据赋给实例对象
                        }
                    }).catch(function (error) {

                    })
                }