Vue2.0（购物车和地址选配）

最新推荐文章于 2023-03-06 10:42:43 发布

原创最新推荐文章于 2023-03-06 10:42:43 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue2-0

javaScript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了Vue2.0的基础指令，包括v-model、v-text、v-show、v-if、v-bind、v-for和v-on，同时讲解了如何创建实例，如初始化项目文件和安装必要的依赖，如vue-resource用于后台交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础指令

v-model

主要用于表单中，视图改变模型也会发生改变，反之亦然。

<a href="javascript:;" v-on:click="changeMoney(item,-1)" v-if="item.productQuentity>1">-</a>
<input type="text" disabled value="0" v-model="item.productQuentity">
<a href="javascript:;" @click="changeMoney(item,1)">+</a>

v-text

文本渲染，效果等价于{{}}。区别在于Vue没有初始化完成之前，使用{{}}可能会显示到页面上。

v-show

控制元素的显示隐藏（通过display:blkock或者display:none控制）

v-if

同样也是控制元素的显示隐藏。如果元素不显示的话，整个DOM都没有。

v-bind

绑定属性。例如动态绑定图片的src属性

:class="{'md-show':delFlag}"

v-for

遍历元素。v-for="(item,index) in obj"     =>  (每一项，索引）

//控制显示的内容
filterAddressList() {
   return this.addressList.slice(0,this.limitNumber);
}

v-on
```
事件绑定
```

@click="setDefault(item.addressId)"

过滤器

filter

对接口返回的数据做业务转换。例如接口返回Type字段，对应的值为1，2，3.......那么通过过滤器可以转成与之相对应的全部、单品、套装.........

//局部过滤器
//用法 Item total: <span class="total-price">{{totalMoneys | formatMoney}}</span>
 filters: {
   formatMoney: function(value) {
        return "￥ " + value.toFixed(2);
    }
}
//全局过滤器
//用法 <div class="item-price-total">{{item.productPrice*item.productQuentity | money('元')}}</div>
Vue.filter("money",function(value,type){
    return "￥ " + value.toFixed(2) + type;
})

创建实例

初始化项目文件
```
npm init
```

安装项目依赖

npm install vue –save

安装vue到默认路径。如果想安装到开发环境，使用--save-dev.

安装与后台交互插件

npm install vue-resource –save

//获取数据
getAddressList(){
        this.$http.get('data/address.json').then(response => {
            let res = response.data;
            if (res.status == 1) {
                this.addressList = res.result;
            }

        })
       }

var vm = new Vue({
    el: '#app',
    data: {
        //vue的模型
        productList:[],
        selectAll: false,
        delFlag:false
    },
    filters: {
        formatMoney: function(value) {
            return "￥ " + value.toFixed(2);
        }
    },
    mounted: function() {
        //生命周期的一部分，实例化编译完成后，默认需要查询某一个方法
        //使用mounted钩子，并不能保证这个实例已经插入文档，所以还应该在钩子函数中包含Vue.nextTick/vm.$nextTick
        var _this = this;
        this.$nextTick(function(){
            _this.cartView();
        })

    },
   computed: {
        totalMoneys:function () {
            let result = 0;
            this.productList.forEach( item => {
                if (item.checked) {
                    result += item.productPrice * item.productQuentity;
                }
            });
            return result;
        }
    },
    methods: {
        cartView:function(){
            //从后台获取数据
            this.$http.get("data/cart.json").then((response) => {
                let res = response.body;
                if (res.status == 1) {
                    this.productList = res.result.productList;
                    // this.totalMoney = res.result.totalMoney;
                }


            })
        },
        //改变商品数量
        changeMoney:function(product,way) {
            if (way > 0) {
                product.productQuentity++;
            } else {
                product.productQuentity--;
                if ( product.productQuentity < 1) {
                    product.productQuentity = 1;
                }
            }
        },
        //单选
        selectedProduct: function(item){
            if (typeof item.checked == 'undefined') {
                //全局注册
                // Vue.set(item, 'checked', true);
                // 局部注册
                this.$set(item, 'checked', true)
            } else {

                item.checked = !item.checked;
            }
        },
        //全选
        selectAllFn: function(flag) {
            this.selectAll = flag;
            //遍历所有商品，改变状态
            this.productList.forEach((item,index) => {
                if (typeof item.checked == 'undefined') {
                    this.$set(item, 'checked', this.selectAll);
                } else {
                    item.checked = this.selectAll;
                }
            })
        },
        delProduct() {
            this.delFlag = false;
            this.productList.splice(this.delIndex,1);

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