vue中的一些注意事项

最新推荐文章于 2023-11-22 18:22:14 发布

Null_Bugs

最新推荐文章于 2023-11-22 18:22:14 发布

阅读量1.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Null_Bugs/article/details/79737879

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在使用v-for的时候，如果想要拿到下标：

v-for="(item,index) in products"

在原生的: [1,2].foreach(function(value,index){

console.log(value,index)

})

jquery: $.each(function(index,value){

})

加载图片： v-bind:src="item.productImg"

使用vue-resource的话他的 this.$http.get('url',{参数}).then(function(){

})

其中this 指向vue

例子：

var vm = new Vue({
el:"#app",
data:{
totalMoney:0,

productList:[]，

checkAllflag：false,

delFlag:false

},
filters:{
},
mounted:function(){
this.carView()
},
methods:{
catView:function(){
var _this = this;
this.$http.get("url").then(function(res){
_this.productList = res.body.result.list;
_this.totalMoney = res.body.result.totalMoney ;
})
}
}

})

在mounted函数里面：   mounted:function(){
this.$nextTick(function(){
vm.carView()
                         })
                         }

es6的语法：methods:{
                  carView:function(){
                this.$http.get("url").then(res=>{
                this.productList = res.body.result.list;
                this.totalMoney = res.body.result.totalMoney ;
                    })
                      }
                     }

局部过滤器：filters:{
formatMoney :function(value){
return "￥"+value.toFixed(2)
}

}

全局过滤器： Vue.filter('money',function(value,type){
return '￥'+value.toFixed(2)+type
})

注意：一般金额的小数是后端直接返回的，不许要前端做处理

过滤器传参使用函数 | formatMoney('元')

事件绑定：v-on:click="" 或者 @click=""

购物车加减功能： <div class="quantity">
<a href="javascript:void 0" v-on:click="changeMoney(item,-1)">-</a>
<input type="text" value="0" disabled v-model="item.productQuentity">
<a href="javascript:void 0" v-on:click="changeMoney(item,1)">+</a>

</div>

changeMoney:function(product,way){
if(way>0){
product.productQuentity++;
}else{
product.productQuentity--;
if(product.productQuentity<1){
product.productQuentity=1
}
}

}

购物车的多选框： <div class="cart-item-check">
<a href="javascript:void 0" class="item-check-btn" v-bind:class="{'check':item.checked}"                                         @click="selectedProduct(item)">
                <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
            </a>
    </div>

selectedProduct:function(item){

if(typeof item.checked == "undefined"){
Vue.set(item,'checked',true)
this.$set(item,'checked',true)//局部
}else{
item.checked=!item.checked

}

//实现了单选全部按钮全选被选中
this.checkAllFlag = this.productList.every((val)=>{
return val.checked == true

}

this.calcTotalPrice()

}

购物车全选取消全选：

</div>

checkAll:function(flag){
this.checkAllflag = flag;
var _this=this;
this.productList.forEach(function(item,index){
if(typeof item.checked == "undefined"){
_this.$set(item,'checked',_this.checkAllflag)//局部
}else{
item.checked=_this.checkAllflag
}

}

this.calcTotalPrice()

}

//计算总金额

calcTotalPrice:function(){
var _this = this;
this.totalMoney= 0;
this.productList.forEach(function(item,index){
if(item.checked){
_this.totalMoney+=item.prodoctPrice*item.productQuentity
}
})