vue语法学习

v-for 循环嵌套 + v-if 判断 

    

    

        
角色名称
        
解锁角色需要的分数
        
创建日期
        
操作  
    
    
    

    

        
{{item.title}}
        
{{typeItem.type}} 任务：{{item.unlockScore}} 分
        
{{item.createTime}}
        

            删除
        
    
    
    

    

        
{{tfootMsg}}
    
    

易错：

js 写习惯了，有时在 vue methods function 中用了 for(){} 循环 ，竟然不识别。

vue 中标签里循环使用v-for ,方法里面循环使用forEach。

//获取商品分类
getProductType: function () {
    this.$http.get("/shop/getProductType")
            .then(function (res) {
                if (res.data.action) {
                    let productTypeList = res.data.result;
                    productTypeList.forEach(function (item){
                        if(item.comment == 'pet'){
                            this.productTypeId=item.id
                            console.log("getProductType productTypeId = "+this.productTypeId)
                        }
                    })

                }
            }, function (error) {
                console.log(error)
            }
    )
}

 

动态 select 加载 和 change 事件

    {{item.type}}

//任务分类更改，触发获取任务列表
selChange:function(event){
      this.typeId = event.target.value
      this.getTaskList()
}

易错：

@change="selChange(event)"  event 前面没有写 $ 

设置select默认选中项

    淘宝
    京东
    云集
    贝店
    微信商城

data:{
    saveAddMsg:"",
    addItem:{
        "type":""
    }
},

//刷新新增
refreshAddModal:function(){
    this.addItem.type="1"
    this.saveAddMsg=""
},

//新增保存
saveAddResult:function(){
    this.$http.post("/web/addTicket",this.addItem)
            .then(function(res){
                if(res.data.action){
                    this.saveAddMsg="操作成功！"
                    //关闭模态框
                    $("#myModal_add .modal-header .sr-only").click();
                    //再次查询页面初始化列表
                    this.getTheList()
                }
            },function(error){
                console.log(error)
            }
    )
},

$emit 传参 

子组件

Vue.component('vue-productdetail', {
    props:{
        isShowNavbarProduct:false
    },
    data: function () {
        return {

        }
    },
    template: '
 
',
    methods: {
        closeNavbarProduct:function(){
            this.$emit('on-close')
        },
        goProductDetail:function(id){
            this.$emit('on-go',id)
        }
    }
})

父组件 

goProductDetail:function(id){
    console.log("goProductDetail id= "+id)
    this.productImgList.forEach(function(item){
        if(item.id == id){
            let productDetailMsg=JSON.stringify(item.list);
            sessionStorage.setItem("productDetailMsg",productDetailMsg)
        }
    })
}

vue监听滚动事件 

mounted(){
    window.addEventListener('scroll', this.handleScroll)
}

添加方法

handleScroll:function(){
    this.winPos = $(window).scrollTop();//距离顶部滚动高度
    console.log("winPos = " + this.winPos)
    if (this.winPos > 600) {
        this.isShowCustomer=true
    }else{
        this.isShowCustomer=false
    }
}